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腾讯 公司 前 资深 前 端 工程 师 呕心沥血 之 作 ， 移 动 Web 开 发 者 必 读 佳品 
全 方位 展现 用 HTML 5 开发 移动 Web 和 应 用 的 完整 过 程 ， 以 及 各 种 策略 和 技巧 


O 详细 讲解 了 HTML 5 的 新 增 功能 、CSS 3 核心 概念 、Web Page, Web App， 触 摸 屏 API、 
地 理 定 位 、WebSocket、 通 信 基 础 、 实 时 Web 技 术 、 感 官 世界 、history 和 导航 等 内 容 


O 从 实战 开发 的 角度 详细 介绍 了 jQueryMobile、Sencha Touch、Bootstrap 和 PhoneGap 
等 移动 Web 开 发 框架 的 应 

O 注重 实战 ， 详 细 介绍 了 175 个 实例 和 3 个 综合 案例 ， 几 乎 每 个 知识 点 都 配备 了 完整 可 运行 
的 示例 代码 ， 并 对 重点 内 容 录制 了 高 清 教 学 视频 辅助 读者 学 习 


本 书 源 程序 、 教 学 视频 下 载 网 址 : www.tup.com.cn 或 www.wanjuanchina.net 
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FERRAR, 全面、 系统 、 详 尽 地 介绍 了 HTML 5 相关 技术 和 其 在 移动 开发 领域 的 应 用 。 书 中 提 
供 了 大 量 的 代码 示例 ， 读 者 可 以 通过 这 些 例 子 理解 知识 点 ， 也 可 以 直接 在 开发 实战 中 稍 加 修改 应 用 这 些 


代码 。 本 书 涉及 面 广 ， 从 基本 原理 到 实战 ， 再 到 项 目 工作 流 ， 几 乎 涉及 


-个 合格 的 前 端 开 发 工程 师 需要 


具备 的 所 有 重要 知识 。 另 外 ， 作 者 专门 为 书 中 的 重点 内 容 录 制 了 高 清 配套 教学 视频 ， 并 提供 了 本 书 涉及 


的 源 程序 ， 以 便于 读者 高 效 、 直 观 地 学 习 。 


本 书 共 17 章 ， 分 为 两 篇 。 第 1 篇 为 HTML 5 移动 Web 开发 基础 ， 涵 盖 的 内 容 有 移动 互联 网 的 发 展 概 
述 .HITML 5 基础 .CSS 3 开发 技术 .从 网 页 到 应 用 (Application)、 指 尖 下 的 浏览 器 .地 理 定位 (Geolocation )、 
Web Worker、 通 信 基 础 、 实 时 Web 技术 、 感 官 世界 、history 与 导航 等 。 第 2 篇 为 HTML 5 移动 Web F 
发 实战 ， 涵 盖 的 内 容 有 jQuery Mobile, Sencha Touch, Bootstrap, PhoneGap, Foundation 及 Node.js 等 其 


他 移动 Web 开发 技术 。 
本 书 适 合 所 有 想 全 面 和 深入 学 习 HIML 5 开发 技术 的 人 员 阅 读 ， 尤 
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近 几 年 全 球 都 在 谈论 一 个 新 名 词 一 移动 互联 网 。iPhone 和 Android 仿佛 就 在 一 夜 之 
间 将 人 们 从 原始 社会 带 入 了 文明 时 代 。 就 在 五 六 年 前 ， 你 很 难 想象 当 你 置身 于 一 个 陌生 城 
市 之 时 可 以 不 费 吹 灰 之 力 就 能 找到 两 条 街 以 外 最 合 你 胃口 的 那个 西餐 厅 ， 并 邀请 几米 开外 
的 漂亮 姑娘 和 你 共 进 晚餐 。 

作为 互联 网 从 业者 ， 我 深 知 投 入 建设 这 样 一 个 便捷 的 互联 网 世界 是 多 么 的 激动 人 心 。 
作为 Web 开发 的 坚定 拥护 者 ， 我 也 更 知晓 绝 不 能 在 移动 互联 网 时 代 漏 掉 HTML 5 技术 。 


1. HTML 5 不 仅仅 是 HTML 


早期 的 HTML 在 非常 长 的 时 间 里 被 人 们 认为 是 一 种 效率 低下 , 且 功 能 简单 的 网 页 开发 
BUR. fH Web 技术 的 不 断 发 展 让 “网 页 ”和 “应 用 ”的 界限 越 来 越 模糊 ， 尤 其 是 HTML 5 
的 横 空 出 世 让 Web 变 得 更 加 强大 。 

HTML 5 标准 草案 最 初 发 布 于 2008 年 ， 而 后 被 各 大 浏览 器 厂商 跟 进 ， 包 括 Chrome、 
IE. Opera 和 Safari 等 。 它 发 展 迅 速 ， 很 快 成 为 了 开发 跨 平 台 和 跨 设备 应 用 的 首选 客户 端 
技术 。 它 赋予 浏览 器 强大 的 能 力 。 例 如 ， 基 于 HTML 5 甚至 完全 可 以 抛弃 特定 的 操作 系统 
平台 一 一 Chromebook 就 是 这 方面 的 有 力 践 行者 。 

而 对 于 开发 人 员 来 讲 ，HTML 5 使 得 开发 应 用 程序 更 加 高 效 、 快 捷 和 简单 ， 几 十 行 代 
码 便 可 以 实现 过 去 几 百 上 千 行 代码 才能 实现 的 功能 ， 真 是 省 时 省 力 。 

2. HTML 5 易学 易 用 


HTML 5 增强 了 HTML 的 功能 ， 但 又 据 弃 了 XHTML 的 复杂 ， 在 学 习 上 几乎 不 用 花费 
太 多 功夫 ， 在 使 用 上 也 尽量 贴近 人 们 的 常规 思维 。 

HTML 5 社区 和 相关 技术 发 展 也 十 分 迅速 。 尤 其 在 移动 互联 网 的 助力 下 ，HTML 5 的 步 
子 迈 得 更 大 了 。 一 方面 ， 对 程序 开发 不 了 解 的 设计 师 也 能 利用 HTML 5 和 CSS 3 技术 轻易 
地 设计 出 高 保 真 的 动态 应 用 原型 。 另 一 方面 ， 前 端 开发 工程 师 可 以 利用 HTML 5 提供 的 编 
程 接 口 编写 出 强大 的 应 用 程序 。 


3. 本 书 的 诞生 


许多 人 在 学 习 HTML 5 的 时 候 不 明白 究竟 什么 才 算 是 HTML 5， 也 经 常 搞 混 一 些 概念 
和 用 法 。 从 某 种 角度 来 说 ，HTML 5 是 一 系列 技术 标准 的 集合 ， 并 且 是 不 断 向 前 发 展 的 技 
术 。 为 了 帮助 那些 对 移动 开发 感 兴趣 的 读者 能 够 在 较 短 的 时 间 内 掌握 HTML 5 开发 技术 ， 
笔者 编写 了 本 书 。 

本 书 首先 从 HTML 5 的 历史 和 背景 入 手 ， 让 读者 理解 HTML 5 究竟 为 何 物 。 然 后 一 一 
讲解 了 HTML 5 的 相关 技术 标准 及 其 在 移动 Web 开发 中 的 应 用 , 以 期 读者 能 够 掌握 HTML 


HTML 5 移动 Web 开发 实战 详解 


5 移动 Web 开发 的 核心 内 容 。 最 后 再 讲解 HTML 5 移动 Web 开发 的 相关 工具 ， 让 读者 可 
以 快速 成 为 一 位 高 效 而 专业 的 开发 者 。 


本 书 特色 


1. EGER, SENI 

本 书 基 本 涵盖 了 HTML 5 移动 Web 开发 的 所 有 常用 知识 点 及 开发 工具 。 无 论 是 初学 者 ， 
还 是 有 一 定 基础 的 Web 开发 从 业 人 员 ， 通 过 阅读 本 书 都 将 获 益 菲 浅 。 

2. 注重 实践 ， 快 速 上 手 

本 书 不 以 枯燥 乏味 的 理论 知识 作为 讲解 的 重点 ， 而 是 从 实践 出 发 ， 将 必要 的 理论 知识 
和 大 量 的 开发 实例 相 结 合 ， 并 将 笔者 多 年 的 实际 项 目 开 发 经 验 贯 穿 于 全 书 的 讲解 中 ， 让 读 
者 可 以 在 较 短 的 时 间 内 理解 和 掌握 所 学 的 知识 。 


3. 内 容 深入 、 专 业 

本 书 直 击 要 害 ， 先 从 标准 文档 入 手 ， 深 入 浅 出 地 讲解 了 Web 技术 的 原理 。 然 后 结合 移 
动 Web 开发 的 相关 工具 ， 介 绍 了 实际 的 移动 Web 开发 ， 让 读者 学 有 所 用 。 

4. 实例 丰富 ， 随 学 随 用 

本 书 提供 了 大 量 来 源 于 真实 Web 开发 项 目的 实例 ， 并 给 出 了 丰富 的 程序 代码 及 注释 。 
读者 通过 研读 这 些 例子 ， 可 以 了 解 实际 开发 中 编写 代码 的 思路 和 技巧 ， 而 且 还 可 以 将 这 些 
代码 直接 复 用 ， 以 提高 自己 的 开发 效率 。 


5. 视频 教 学 ， 高 效 直 观 


笔者 专门 为 书 中 的 重点 内 容 和 实例 录制 了 配套 教学 视频 进行 讲解 , 以 方便 读者 更 加 高 效 
直观 地 学 习 ， 从 而 取得 更 好 的 学 习 效果 。 这 些 视频 及 本 书 源 代码 需要 读者 自行 下 载 。 读 者 可 
以 到 www.tup.com.en 上 搜索 到 本 书页 面 按 提示 下 载 ， 也 可 以 到 www.wanjuanchina.net 上 的 
相关 版 块 下 载 。 


本 书 内 容 


第 1 篇 HTML 5 移动 Web 开 发 基础 〈 第 1 一 11 章 ) 


本 篇 主要 介绍 了 HTML 5 移动 Web 开发 的 基础 知识 首先 介绍 了 移动 互联 网 的 发 展 历 
史 和 大 背景 ， 并 阐述 了 万 维 网 的 精髓 和 Web 标准 的 意义 。 了解 这 些 知识 可 以 从 更 宏观 的 层 
面 理解 HTML 5 技术 。 然 后 从 Web 前 端 开 发 的 三 大 技术 层面 ， 详 细 介绍 了 HTML 5 开发 
的 核心 技术 。 其 中 ，HTML 是 表意 层面 的 技术 ，CSS 是 视觉 层面 的 技术 ， 而 JavaScript 则 
是 行为 和 功能 层面 的 技术 。 掌 握 本 篇 内 容 ， 可 以 为 读者 的 移动 Web 开发 打 好 基础 。 


zi 


第 2 篇 HTML 5 移动 Web 开 发 实战 〈 第 12 一 17 章 ) 


B HTML 5 大 大 简化 了 开发 过 程 ， 降 低 了 开发 成 本 ， 但 这 远 远 不 够 ， 还 需要 借助 许 
多 基于 HIML 5 的 移动 开发 框架 。 这 些 框 架 可 以 让 开发 任务 变 得 更 加 简单 。 

本 篇 从 实战 角度 介绍 了 HTML 5 移动 开发 框架 及 其 他 相关 知识 。 首 先 介绍 了 轻 量 级 框 
7 jQuery Mobile, 然后 介绍 了 重量 级 框架 Sencha Touch, 最 后 介绍 了 Bootstrap、PhoneGap、 
Foundation 及 Node.js 等 其 他 移动 Web 开发 技术 。 掌 握 本 篇 内 容 ， 读 者 便 可 以 较 好 地 利用 
这 些 技术 进行 移动 Web 开发 。 


本 书 读者 对 象 


HTML 5 初学 者 ; 

有 一 定 基 础 的 Web FRAR: 
Web 前 端 开发 工程 师 ; 
移动 应 用 开发 人 员 ; 
浏览 器 开发 人 员 ; 

大 中 专 院 校 的 学 生 ; 

相关 培训 班 的 学 员 。 


本 书 作者 
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OOOOOOCDO 


编者 


第 1 章 
11 


H X 


第 1 篇 HTML 5 移动 Web 开发 基础 


移动 互联 网 的 浪潮 之 前 AZMI: 17 AP) E 2 
iR JG, ATA 
1.1.1 正确 的 时 间 做 正确 的 事 
112 互联 网 的 第 二 次 崛起 
1.1.3 £3 HEP EAE T TR 3 27 Ji - 
移动 互联 网 时 代 ，Web WKE 
1.2.1 你 应 该 学 习 Web 开发 
1.2.2 ”你 应 该 为 未 来 学 习 一 一 移动 Web F} 
WWW 的 精髓 
1.3.1 万 维 网 发 明 者 的 初衷 … 
1.3.2 HTML 是 什么 … 
13.3 Hi Web 标准 … 
1.3.4 如 何 理解 Web 语义 化 … 
13.5 HTML 5 和 语义 网 
主角 登场 一 一 HTML 5 的 前 世 今生 … 
14.1 JU HTML 5 那些 旧事 
1.4.2 为 移动 而 生 ——— 
143 ”你 应 该 知道 的 HTML 5- 


HTML 5 基础 CN “教学 视频 : 38 分 钟 ) … 
重 温 HTML 
2.1.1 HTML 能 干什么 … 
242 HTML 的 核心 要 素 
HTML 的 语义 来 源 
HTML 5 的 元 素 和 属性 … 
231 
232 HIMLS 与 它 的 全 局 属性 
2.3.3 ”内 容 模型 (content models) - 
2.34 文档 元 数据 (Document metadata) HH 36 


第 3 章 
31 
32 


SM Cn d 40 
2.3.06 ”分 组 内 容 (grouping content) 
23.7. 文本 级 语义 Ctext-level semantics) 
2.3.8 修改 记录 Cedits) 
2.3.9 嵌入 内 容 (embedded content). - 
2.3.10 
2.3.11 


23.12. input 元 素 和 其 属性 

2313 表单 操作 ………… 

人 表单 闫 容 性 en —XA 84 

2.045 ”交互 式 元 素 (Interactive elements) nennen 86 
初探 CSS 3 ( 所 “教学 视频 : 20 分 钟 】 emen 88 

关于 CSS 的 那 件 小 E OT TT PVT NH P NEN NDERIT I I DIL 88 


CSS 的 核心 概念 
3.2.1 语法 、 层 县 和 特殊 性 (specificity) 
3.2.2 HEH (Box Model) oeeeeeeeeeeeeeererreeereereeeerereeeetereereeereeeeeteeeeeeeeeseeetteneereteneneettenneeeteneeeeeen 92 
3.2.3 ”可视化 格式 模型 (visual formatting model) - 


3.4 


xs 


3.6 


3.7 


3.832 ”强大 的 结构 性 伪 类 (Structural pseudo-classes) … 
3.3.3 其 他 选择 器 E E E E 
3.3.4 CSS 4 中 的 选择 器 
和 图 片 说 再 见 
3.4.1 背景 和 边框 
342 渐变 和 阴影 - 
343 自 定义 字体 … 
CSS 3 布局 之 道 
3.5.1. 炒 冷 饭 一 一 负 边 距 与 浮动 … 
3.5.2” 栅 格 系统 与 多 列 布局 

3.5.3 ”弹性 盒 布 局 (Flexible Box) ~- 
动 起 来 
3.6.1 CSS 变形 (CSS transform). ~- 
3.62 CSS 过渡 (CSS Transitions) … 
3.63 CSS 动画 (CSS Animations) 
响应 式 设 计 基础 

3.7.1 ”从 两 栏 布局 开始 说 起 
3.72 从 media 到 media queries 
3.7.3 ”响应 式 栅 格 系统 


3.7.4 移动 优先 (mobile first) 理念 
3.5 另 一 种 思路 : 后 端 模板 输出 的 优化 


ENE E a aaaea 153 
第 4 章 从 网 页 (Web page) 到 应 用 (Application) (ARZI: 19 分 钟 ) …… 155 
站 Web 不 能 承受 之 于 ei Ed 155 


42 ”本 地 存储 升级 
4.2.1 cookie 和 cookie 的 局 限 - 
422 B HTML 5 的 Web Storage 
42.3 IE Í userData 

lt; —— 
43.1 缓存 和 应 用 缓存 
432 应 用 缓存 的 基本 使 用 


4.4.1 模拟 拖 放 
442 原生 拖 放 


4.5 
4.5.1 选择 文件 


4.52 操作 文件 e RE S 184 
第 5 章 指 尖 下 的 浏览 器 RAWI: 20 分 钟 】 eee 188 


5. 基本 touch 事件 
52 ”模拟 手势 事件 … 


第 6 章 地 理 定位 (Geolocation API) (M REMI: 7 分 钟 ) 
6.1 获取 当前 位 置 
6.2 


6.3 
6.4 

第 7 章 Web Worker ( J "教学 视频 : 13 分 钟 】 eene 218 
1 1 201 m4 iR E EE 218 


7.2 Jb JavaScript 引入 线程 技术 … 
73 WRAS Worker 代码 


7A JEE Wo 
第 8 章 通信 基础 SRAMA: 16 Ap) eene 226 


8.1 
8.2 ”路 文档 通信 (Cross-document messaging) 


83 ”通道 通信 (channel messaging) eene 234 


第 9 章 实时 Web 技术 (ARZNI: 1:49) 
轮 询 和 长 轮 询 (comet) 


9.1 


92 RIRH (seversen events》 Se i 239 


9.3 Web Sockets 
9.4 利器 : SocketIO- 


[LEE zu ap p eteeeteeerteerersirereerireeeeeseneeereeeeserorerseresoeeasesorseeeraretearereeeeeeeerteneneeerarnerereet 247 
8 10€ 感官 世界 CN 教学 视频 : 9 2M) eee 257 
10.1 .感知 方 疝 Codentation) JslME Onotian) eit 257 
10.2 音 视 频 捕 获 TT 262 
第 11 章 history 与 导航 CN RARI: 12 Ap) emm 264 
111 基于 hashchange 事件 管理 导航 0 eee 264 


11.2 HTML 5 history API- 
113  history.js 


第 123: ”站 在 巨人 们 的 房 上 一 一 Query Mobile (RFM: 21 分 钟 ) 


12. 移动 Web 框架 概览 


12.2 jQuery Mobile 


121.1 
12.12 


123.1 
12232 
1223 
12.2.4 
12.2.5 
12.2.6 
12.2.7 
12.2.8 
12.2.9 
12.2.10 
12.2.11 
12.2.12 
12.2.13 
12.2.14 
122.15 


第 2 篇 HTML 5 移动 Web 开发 实战 


HTML 5 移动 应 用 技术 大 观 oeeetrtttistntetssssssrsssssnnesnsnsnensssnnnsnnsnnnennnnnnnnnnnnnnnonsnnennnnnnnennnnt 
因地制宜 、 量 体裁 衣 … 


Hello, jQuery Mobile! 
页 面 (Pages) 
Ajax 导航 模型 和 转 场 动画 〈transitions ) mmm e 286 
UI 组 件 一 一 一 切 皆 响应- : 
UI 组 件 一 一 表单 元 素 
UI 组 件 一 一 Header & Footer 
UI 组 件 一 一 ListView- 
UI 组 件 一 一 Collapsibles 和 Accordions ~- 
UI 组 件 一 一 popup- 
UI 组 件 一 一 dialog- 
响应 式 组 件 一 一 responsive grids 
响应 式 组 件 一 一 reflow tables 
响应 式 组 件 一 一 Column Toggle tables -- 
响应 式 组 件 一 一 sliding panels 


第 13 章 
13.1 
13.2 
13.3 
134 


第 14 章 
14.1 
142 
143 
144 
14.5 
14.6 
14.7 


第 15 章 
151 
152 


第 16 章 
16.1 
162 
163 
164 


9173 
11 


12216 ”主题 化 和 themeroller etn nnne nnne 340 
VP AVE: aa 342 
Sencha Touch ( MFR: 8 分钟) - 
bonjour. Sa a aa 345 
第 一 车 Sencha Fouch 程序 二 349 
d 361 
Bootstrap ( Nac: 15 分 钟 ee 363 
Bootstrap 3 综述 363 
Grid 系统 
响应 式 实用 类 
组 件 更 新 一 -Navbar ————————————————————— 370. 
DL 1] PALETTE 376 
组 件 更 新 一 Panels 
从 Bootstrap 2 迁移 到 Bootstrap 3 
PhoneGap ( I “教学 视频 : 8 分 钟 】 eene 385 
PhoneGap 101 
开发 基于 PhoneGap 的 程序 
其 他 移动 Web 技术 ORC ace: Dr s E 391 
Foundation: 
Semantic-UI ~ 
Pure —————————————————————————————— M 
Titanium ————————————————————— 
如 何 成 为 优秀 的 前 端 工程 师 (CN “教学 视频 : 29 AAP) a 401 
Node.js ———————————————————————————— 401 
17.1.1 什么 是 Node.js ———————————— 401 


17.1.2 Node js 基础 
17.13 Node.js 模块 系统 - 
17.14 ”Nodejjs 包 管理 系统 NPM «eene nenne ettntnnnnnnnnnnnnnnn 405 
eb DD 

17.1.6 前端 工程 师 需 要 了 解 Node.js 的 什么 


17.2.4. CSS 
172.2 CSS 预 处 理 器 (CSS preprocessor) ~ 
17:23 
17.2.4 
17.2.5 


VENE IO J————————Á 


174 


17.3.3 
1132 


从 职业 到 专业 、 从 前 端 到 全 端 


17.4.1 
17.4.2 
17.4.3 
17.4.4 
174.5 


Chrome 开发 者 工具 
多 设备 调试 : Adobe Edge Inspec 


Mac 与 Windows- 


Sublime Text 
MV* 框 架 … 
如 何 保持 你 的 知识 处 在 最 前 


跳出 前 端 ， 更 大 的 世界 


>> 


>> 


>> 


>> 


>> 


phl 


>> 


>> 


>> 


>> 


>> 


HTML 5 £&zj Web 
ZFA Adi 


移动 互联 网 的 浪潮 之 赂 


HTML 5 基础 
初探 CSS 3 
从 网 页 (Web page ) 到 应 用 ( Application ) 


指 尖 下 的 浏览 如 


地 理 定位 ( Geolocation API ) 


Web Worker 


通信 基础 
实时 Web 技术 


感官 世界 


history 与 导航 


第 1 章 移动 互联 网 的 浪潮 之 癌 


吴军 先生 曾 在 《浪潮 之 赂 》 一 书 里 说 :“ 在 工业 史上 ， 一 种 新 技术 代替 旧 的 技术 是 不 
以 人 的 意志 为 转移 的 。 人 生 最 幸运 之 事 就 是 发 现 和 顺应 这 个 潮流 。” 

在 本 书 诞生 的 时 刻 ， 在 你 捧 着 这 本 书 阅读 的 时 刻 ， 笔 者 可 以 负责 任 地 告诉 你 ， 移 动 互 
联网 正 处 于 时 代 的 浪潮 之 讶 ， 看 着 满 世 界 的 Android 和 iPhone， 你 几乎 都 不 要 找 更 多 的 理 
由 来 佐证 这 一 观点 ， 那 么 如 何 顺应 这 股 潮流 ? 简单 地 回答 ， 先 把 本 书 读 完 吧 ! 


l.l HZA, (Mem 


1.1.1. 正确 的 时 间 做 正确 的 事 


第 三 次 工业 革命 的 来 临 标志 着 人 类 进入 了 信息 时 代 ， 这 个 时 代 是 一 个 以 技术 为 革命 手 
段 的 时 代 ， 每 一 个 不 同 的 阶段 都 会 产生 一 些 引 领 时 代 的 公司 ， 这 些 公司 往往 都 依附 于 某 些 
技术 方面 的 变革 。 

我 们 先 追溯 到 上 个 世纪 微软 公司 发 家 的 时 候 。 

话说 , 微软 最 初 还 是 个 为 IBM 做 操作 系统 的 毛 头 打工 仔 , 那 时 候 的 软件 只 是 硬件 的 附 
庸 品 ， 以 卖 硬件 赚 的 盆 满 钵 满 的 IBM 无 疑 成 为 IT 界 当红 一 哥 。 随 着 时 代 的 变迁 ， 硬 件 性 
能 不 断 提升 ， 但 价格 却 不 断 降低 ， 计 算 机 渐渐 地 从 单位 走向 了 个 人 ， 兼 容 机 的 出 现 使 得 微 
软 的 操作 系统 卖 到 了 世界 各 地 ， 计 算 机 软件 行业 迅速 崛起 ， 微 软 瞬间 成 为 了 一 代 IT 霸主， 
PC 时 代 也 因此 成 形 。 

再 往 后 ， 由 于 互联 网 的 飞速 发 展 ， 人 们 在 互联 网 上 所 产生 的 信息 呈 爆 炸 趋 势 在 增长 。 
而 立志 于 整合 全 球 信息 并 使 人 人 受益 的 Google 公司 横 空 出 世 , 重 新 发 明 搜 索引 擎 的 Google 
不 仅 实现 了 使 人 人 受益 的 愿景 ， 也 一 路 走向 华尔街 投资 人 簇拥 着 的 金色 大 道 。 

而 当前 大 红 大 紫 的 Apple 公司 ， 则 是 搭 了 移动 时 代 的 顺风 车 ， 和 任 着 iPhone， 全 世界 的 
人 们 都 为 之 疯狂 ， 全 球 的 潮流 似乎 都 在 围 着 Apple 那个 被 咬 掉 的 苹果 在 转 ， 乔 布 斯 本 人 也 
随 着 病情 加 重 和 股价 疯 涨 被 一 步 步 推 向 了 神 坛 …*… 

这 些 个 科技 时 代 的 万 千 史 诗 故事 无 一 不 在 反复 地 说 明 这 个 道理 ， 在 正确 的 时 间 做 正确 
的 事 。 试 想 一 下 ， 要 是 在 20 世纪 80 年 代 时 ， 某 人 站 在 大 讲台 上 发 动 着 现实 扭曲 立场 并 极 
尽 煽 情 地 对 你 说 :“ 这 是 一 个 电话 、 一 个 音乐 播放 器 和 一 台电 脑 …… 对 , 它们 仁 是 一 种 东西 ! 
我 们 把 它 叫做 iPhone!” 在 20 世纪 80 年 代 的 技术 水 平 下 ， 你 还 会 愿意 买 吗 ? 我 想 我 不 会 ， 
以 当时 的 技术 水 平 ， 最 后 被 生产 出 来 的 ， 可 能 是 图 1.1 这 货 吧 ， 拿 着 它 招摇 过 市 可 不 是 什 
么 好 想法 。 
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图 1.1 苹果 曾经 的 设计 


微软 在 PC 时 代 占 领 了 几乎 所 有 桌面 操作 系统 的 市 场 ，Google 在 互联 网 时 代 掌 握 了 进 
入 Web 世界 的 入 口 , Facebook 在 寂寞 泛滥 的 时 代 将 人 与 人 连接 起 来 …… 他 们 无 一 不 在 正确 
的 时 间 做 着 正确 的 事 。 


1.1.2 互联 网 的 第 二 次 崛起 


伴随 着 PC 走 进 千家 万 户 送 温暖 ， 我 想 应 该 无 人 不 晓 互联 网 这 个 玩意 儿 对 整个 世界 的 
颠 荐 。“ 您 上 网 了 么 ”在 一 段 时 期 中 成 为 了 继 “ 您 吃 了 么 ”之 后 的 全 民 口 头 禅 ， 电 子 邮 件 、 
即时 通讯 、 网 上 购物 、 在 线 视频 、 网 络 日 志和 在 线 交 友 …… 几 乎 这 就 是 全 世界 。20 世纪 90 
年 代 末 ， 先 锋 者 们 和 投机 者 们 同时 看 到 了 这 一 前 景 ， 第 一 次 互联 网 泡沫 在 美国 就 此 催生 。 
而 泡沫 过 后 人 们 都 冷静 了 不 少 , 更 加 理智 地 看 待 互联 网 , PC 市 场 里 的 互联 网 世界 ， 一 下 子 
变 得 平淡 了 许多 。 

直到 突然 有 一 天 ， 跳 出 来 一 个 iPhone， 这 几乎 成 为 了 移动 互联 网 开始 腾飞 的 里 程 碑 。 
这 也 是 互联 网 的 第 二 次 崛起 一 一 也 即 移动 互联 网 的 崛起 ， 如 图 1.2 所 示 。 


图 1.2 iPhone 开启 移动 互联 网 腾飞 之 路 


1.1.3 ”移动 互联 网 正 处 于 浪潮 之 襄 


再 次 重申 ,当前 的 浪潮 之 识 就 是 移动 互联 网 ， 如 果 你 不 青 相信, 不 妨 先 来 看 一 组 数据 : 
O 截止 到 2013 年 底 ， 全 球 智能 手机 设备 已 经 超过 10 亿 。 
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O 中 国手 机 网 民 数量 达 4.64 亿 ， 其 中 iOS 和 Android 相对 高 端 设备 的 用 户 数 已 超过 
24Z. 
Q 移动 互联 网 的 成 长 速度 大 概 是 互联 网 的 6 o 
口 预计 2013 年 底 移动 互联 网 规模 将 达 5 亿 ， 将 超过 传统 互联 网 用 户 的 规模 。 

清晰 而 凌厉 的 数据 已 经 说 明了 一 切 ， 移 动 互联 网 不 仅 站 在 科技 产业 的 浪 尖 之 上 ， 而 且 
是 站 在 一 波 惊涛骇浪 之 上 ， 它 是 值得 我 们 为 之 激动 、 为 之 振奋 的 ， 尤 其 在 咱们 国家 ， 买 不 
起 房 只 能 拿 着 手机 刷 微 博 度 日 的 大 环境 下 ， 顺 应 移动 互联 网 的 潮流 是 大 势 所 趋 ， 人 心 所 向 
W, XR. 


12 移动 互联 网 时 代 ，Web 必 将 璀璨 


十 年 前 Web 邑 响 了 互联 网 时 代 的 大 门 ， 十 年 后 的 今天 ， 移 动 互联 网 的 战 幕 率先 由 原生 
应 用 (Native App) 拉 开 ， 移 动 Web 应 用 则 后 来 居 上 。 二 者 之 间作 何 取舍 ， 成 为 了 广大 产 
品 决策 者 、 开 发 者 和 学 习 者 们 争执 不 下 、 喉 唆 不 体 的 问题 。 


1.2.1 你 应 该 学 习 Web 开发 


当 看 着 学 校 里 面 的 学 生 甲 和 乙 还 在 争论 着 是 学 VB 还 是 MFC 更 有 前 途 的 时 候 ， 我 就 
不 禁 想 冲 过 去 给 他 们 后 脑 勺 一 巴掌 :“ 是 时 候 学 Web 了 !” 

也 许 你 也 有 和 他 们 相同 的 疑惑 :“ 听 说 用 C/C++ 的 都 是 大 牛 ， 工作 好 ， 应 该 学 CCH”; 
又 或 许 觉得 Windows 程序 开发 不 错 ，C#、WPF 什么 的 是 个 时 比 的 选择 ， 或 者 徘徊 不 定 ， 
是 去 搞 系统 内 核 还 是 搞 设 备 驱 动 ? 

我 的 建议 是 ， 如 果 你 没 想 好 学 什么 ， 那 么 忘掉 这 些 乱 七 八 糟 的 东西 吧 ， 你 应 该 学 习 
Web 开发 。 

为 什么 ?原因 很 简单 ， 市 场 决定 了 技术 走向 。 整 个 IT 行业 和 相关 行业 现在 对 于 Web 
应 用 的 需求 是 最 大 的 一 一 尤其 是 人 才 需 求 , 在 Github 上 编程 语言 的 热门 排行 可 以 在 某 种 程 
度 上 佐证 这 一 论点 ， 如 图 1-3 所 示 。 


— 
Pyton 

^ PNEENENENENNE 

c 

Objective-C 


图 1.3 Github 语言 热门 排行 榜 


可 以 看 到 , 占据 语言 排行 前 三 的 均 是 以 Web 开发 为 强项 的 语言 ， 而 前 六 名 语言 中 有 五 
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门 语言 (除了 Shell) 是 和 Web 开发 紧密 相关 的 ， 排 行 首位 的 JavaScript 更 是 被 称 为 Web 
时 代 的 汇编 语言 ， 足 以 见得 ，Web 开发 在 业界 所 受 的 重视 程度 。 

遥想 就 在 几 年 前 ，Windows 软件 程序 员 们 还 显得 那么 不 可 一 世 ， 转 瞬间 就 已 经 成 为 了 
Web 的 天 下 ， 真 是 时 光 飞 逝 如 斯 。 

对 Web 开发 人 才 的 需求 ,首当其冲 便 是 如 日 中 天 的 互联 网 公司 们 。 几 乎 没有 哪个 不 是 
以 Web 产品 为 主 的 ， 就 拿 国内 市 场 来 说 ， 百 度 靠 搜索 起 家 ， 面 对 的 是 整个 Web 世界 一 一 
抓 取 和 检索 来 自 Web 的 信息 ， 而 百度 除 搜索 外 最 成 功 的 产品 ， 也 都 立足 于 Web: 贴吧 、 知 


道 和 地 图 ……。 相 反 ， 非 Web 产品 却 死 的 很 快 。 我 相信 你 一 定 还 记得 百度 出 过 的 那些 客户 
端 软件 产品 ， 它 们 几乎 无 一 例外 地 胎 死 腹 中 或 者 幼年 天 折 了 一 一 想 想 百 度 Hi、 百 度 影 音 和 
百度 阅读 器 什么 的 吧 。 


淘宝 做 电子 商务 ， 也 是 以 浏览 器 为 切入 点 而 不 是 开发 一 个 “电子 购物 客户 端 "。 而 腾 
讯 ， 虽 然 是 靠 即时 通讯 软件 发 家 ， 但 相 比 之 下 互联 网 事业 部 门 为 腾讯 带 来 了 更 大 的 效 
益 一 一 QQ 空间 、 门 户 和 QQ 邮箱 …… 而 且 ， 你 不 知道 的 是 ，QQ 客户 端 软件 本 身 也 有 很 大 
一 部 分 功能 是 基于 Web 浏览 器 开发 的 一 一 在 客户 端 软件 中 嵌入 了 打包 后 的 TE. 或 者 Webkit 
浏览 器 。 

除了 互联 网 行业 ， 传 统 软件 行业 也 在 不 断 地 走向 Web。 随 着 计算 机 的 性 能 不 断 增强 ， 
价格 不 断 降低 ,浏览 器 愈 来 愈 承担 起 重要 的 职责 ，Google docs 和 Gmail 都 是 涉足 企业 级 软 
件 市 场 的 杀手 级 应 用 ， 而 Amazon 也 靠 着 云 服务 也 声名 更 起 ， 连 微软 这 样 的 顽固 巨头 也 做 
起 了 浏览 器 版 Office 和 Bing 与 Web 紧密 相关 的 产品 。 

更 激动 人 心 的 是 , 移动 互联 网 将 会 是 Web 世界 的 另 一 针 强 心 剂 。 所 以 ， 如 果 你 还 在 犹 
BETE Web 的 话 ， 很 快 就 会 像 那些 曾经 不 可 一 世 ， 而 现在 却 拿 着 一 纸 简历 四 处 若 若 求职 
的 Windows 程序 员 一 样 了 。 


1.2.2 ”你 应 该 为 未 来 学 习 一 一 移动 Web 开发 

没 错 ， 学 习 Web 是 没 错 的 ， 那 么 移动 Web 开发 又 意味 着 什么 呢 ? 我 们 常 讲 ， 凡 事 快 
人 一 步 方 能 处 变 不 惊 。 目 前 对 于 移动 Web 的 各 方 批评 多 来 自 于 “手机 浏览 器 性 能 差 ” 这 一 
论调 ， 但 在 计算 机 领域 至 今 起 效 的 摩尔 定律 告诉 我 们 : 每 隔 十 八 个 月 计算 机 的 性 能 将 翻 一 
d. 手持 设备 当然 也 不 例外 (后 半 句 是 我 加 的 )。 所 以 , 担心 性 能 那 是 活 在 过 去 的 人 在 杷 人 
TUA. 与 其 担心 一 个 CSS 动画 在 iPhone 4 上 会 卡 ， 不 如 先 学 着 把 它 做 出 来 ， 或 许 你 的 动画 
被 大 家 看 到 时 ， 已 经 都 用 上 动画 无 比 流畅 的 iPhone 6 T. 

这 世界 变化 很 快 ， 若 跟 不 上 节奏 ， 必 然 会 被 淘汰 。 学 习 也 是 同一 个 道理 ， 如 果 你 还 困 
惑 于 牛顿 第 二 定律 那 就 别 想 体会 到 量子 力学 的 美妙 ;如 果 你 还 纠结 于 TE 6 的 盒 模型 和 W3C 
的 盒 模型 之 间 的 差异 那么 就 永远 看 不 到 你 产品 上 线 的 那 一 天 …… 所 以 ， 是 时 候 了 ， 投 身 到 
移动 Web 开发 的 学 习 中 来 吧 ! 


13 WWW 的 精髓 


绝 大 多 数 人 在 谈 及 WWW 的 时 候 ， 可 能 只 会 说 “ 哦 ， 不 就 是 上 网 吗 ”， 学 过 两 天 计算 
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机 会 几 名 英文 的 同学 可 能 会 说 “<WWW， 是 World Wide Web 的 简称 ， 中 文 翻译 为 万 维 网 ”; 
某 些 运 维 哥 哥 可 能 会 告诉 你 WWW 一 般 是 按 约定 俗称 作为 指向 顶级 域名 的 特殊 二 级 域 
名 ; ……。 那 么 作为 开发 人 员 (或 者 立志 成 为 开发 人 员 ) 的 我 们 ， 究 竟 还 如 何 理解 这 简单 
的 三 个 字母 呢 ? 


1.3.1 万 维 网 发 明 者 的 初衷 


一 般 来 说 ， 我 们 对 万 维 网 的 精确 定义 是 这 样 : 是 一 个 由 许多 互相 链接 的 超 文 本 组 成 的 
系统 ， 通 过 互联 网 访问 。 在 这 个 系统 中 ， 每 个 有 用 的 事物 ， 称 为 一 样 “ 资 源 ”。 并 且 由 一 个 
全 局 “统一 资源 标识 符 ”(URI) 标识 。 这 些 资源 通过 超 文本 传输 协议 (Hypertext Transfer 
Protocol) 传送 给 用 户 ， 而 后 者 通过 单 击 链接 来 获得 资源 。 

简单 说 来 ， 万 维 网 实际 上 是 一 个 资源 互联 的 网 络 ， 蒂 姆 。 伯 纳 斯 。 李 婕 士 〈Sir Tim 
Berners-Lee) 发 明 万 维 网 的 初衷 是 如 此 简单 而 直接 。 

1980 年 , 李 姻 士 在 欧洲 核子 物理 实验 室 工 作 时 建议 建立 一 个 系统 来 分 享 科学 家 们 之 间 
的 研究 成 果 ， 并 为 此 构建 了 一 个 原型 系统 。1984 年 ， 李 事 士 重 返 实验 室 时 正式 创造 了 万 维 
网 ， 并 编写 了 世界 上 第 一 个 网 页 浏览 器 和 网 页 服务 器 。 不 得 不 说 ， 没 想到 计算 机 史上 迄今 
为 止 最 伟大 的 发 明 竟 然 来 自 于 一 个 “门外汉 ?1 很 意外 对 吧 ? 而 更 意外 的 是 , 万 维 网 之 后 的 
发 展 ， 完 全 超 乎 了 发 明 人 自己 的 想象 ， 人们 基于 万 维 网 的 基本 架构 ， 衍 生出 了 各 种 伟大 的 
网 站 和 应 用 ， 造 福 了 数 以 亿 计 的 人 ， 在 商业 、 学 界 、 社 会 甚至 政治 领域 ， 都 产生 了 深远 的 
影响 ， 甚 至 他 自己 还 获得 了 诺 贝 尔 和 平 奖 提名 的 殊荣 。 

而 这 一 切 都 建立 在 小 小 的 HTML 的 基础 上 。 在 谈论 HTML 之 前 ,我 们 先 来 谈 谈 Web, 
究竟 Web 的 基因 是 什么 。 李 恬 士 在 创造 万 维 网 之 初 ， 核 心 的 需求 便 是 对 研究 成 果 的 分 享 和 
链接 ， 抽象 成 术语 ， 就 是 前 文 提 到 的 资源 ， 分 享 和 链接 是 Web 赖 以 生存 和 得 以 发 展 的 最 根 
本 原因 ， 也 是 Web 发 明 人 的 初衷 一 一 一 个 简单 到 无 法 再 简单 的 分 享 和 链接 资源 的 系统 。 

Web 这 几 十 年 的 发 展 也 是 不 断 地 更 好 地 满足 分 享 和 链接 的 需求 。 在 最 初 Web 用 于 科研 
和 军事 等 领域 的 时 代 ， 这 个 陌生 的 事物 对 于 专业 人 士 也 只 是 更 多 地 作为 生产 力 工具 ， 真 正 
被 大 众 所 接 受 ， 还 得 得 益 于 浏览 器 技术 的 飞速 发 展 ，Mosaic 发 布 后 大 获 成 功 ， 成 为 了 点 燃 
互联 网 热潮 的 火种 ， 更 成 就 了 互联 网 一 代 名 将 网 景 公 司 。 关 于 网 景 浏览 器 和 微软 IE 
的 大 战 , 已 经 成 为 被 无 数 人 讲 烂 了 的 段子 , 我 们 也 不 再 多 提 , 相 比 于 这 场 10 多 年 前 的 竞争 ， 
真正 的 浏览 器 战争 现在 似乎 才刚 刚 开始 一 一 谷歌 、 微 软 和 苹果 三 大 巨头 以 及 Mozilla 和 
Opera 等 老牌 浏览 器 厂商 无 一 不 在 这 条 路 上 打 得 火热 ， 而 反观 国内 战况 更 是 激烈 。 不 过 ， 
无 论 他 们 打 得 再 火热 ， 浏 览 器 的 技术 和 功能 再 日 新 月 异 ，Web 构想 的 终极 目标 都 不 会 变 ， 
始终 在 于 将 人 类 的 资源 更 好 的 链接 和 分 享 。 

在 过 去 我 们 所 说 的 “资源 ”可 能 更 简单 地 被 认为 是 一 篇 文章 、 一 张 图 片 或 者 一 本 书 ， 
在 那个 被 称 为 Web 1.0 的 时 代 ， 人 们 上 网 通常 只 是 单一 地 浏览 由 网 站 提供 的 内 容 ， 国 内 典 
型 的 例子 便 是 新 浪 和 搜狐 等 门户 网 站 , 从 业者 和 消费 者 对 Web 的 理解 只 局 限于 简单 信息 的 
抽取 ， 但 是 不 妨碍 Web 本 身 基因 的 体现 一 一 分 享 和 链接 资源 (信息 )。 

随 着 Web 2.0 概念 的 火热 ， 大 量 的 交互 性 和 功能 性 网 站 出 现 Flickr、Facebook 和 
twitter…… 而 “资源 ”两 字 的 含义 也 更 加 丰富 ， 音 乐 、 电 影 和 商品 ， 甚 至 是 人 们 自己 的 工 
作 和 生活 点 滴 ， 也 成 为 “资源 ”为 他 人 “所 用 ”。 在 未 来 ， 资 源 的 含义 将 会 更 加 丰富 ， 而 
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Web 的 基因 也 会 继续 辐射 , 分 享 和 链接 的 成 本 会 进一步 降低 ; 而 Web 在 此 目标 上 已 经 越 走 
越 远 ， 而 浏览 器 作为 这 条 通天 大 道 的 入 口 ， 其 相关 技术 无 疑 也 越 来 越 重 要 。 
而 入 口 大 门 的 钥匙 ， 英 过 于 HTML T. 


1.3.06 HTML 是 什么 


HTML (HyperText Markup Language) 语言 是 整个 Web 的 基石 ， 是 一 种 基于 标记 的 语 
言 ， 或 许 你 已 经 学 过 、 用 过 很 长 一 段 时 间 ， 知 道 它 能 干什么 ， 有 什么 特性 ， 受 制 于 哪些 规 
则 规范 ， 但 如 果 要 你 来 精确 的 定义 它 、 解 释 它 ， 可 能 并 不 是 一 件 容易 事 儿 。 通 常 我 们 在 教 
科 书 里 会 看 到 HTML 会 被 译 为 超 文本 标记 语言 ， 做 为 技术 书籍 ， 无 码 不 欢 ， 我们 的 第 一 个 
代码 示例 ， 就 用 来 阐释 HTML 究 竞 是 个 什么 玩意 儿 : 


<div class="subjectwrap clearfix" xmlns:v="http://rdf.data-vocabulary. 
org/#" typeof="v:Movie"> 
<div class="subject clearfix"> 
<div id="mainpic"> 
<a class-"nbg" href="#"” title=" 点 击 看 更 多 海报 "> 
«img src-"4" title=" 点 击 看 更 多 海报 ”alt="Wreck-It Ralph" 
rel-"v:image"»«/a» 
<a class-"trail link" href="#"> 预 告 片 </a> 
Xp class-"gact"» 
«a href="#"> 更 新 描述 或 海报 </a> 
«/p» 
«/div» 
<div id-"info"» 
<span> 
<span class="p1"> 导 演 </span> : 
<a href="#"> 瑞 奇 "摩尔 </a> 
</span> 
<span> 
«span class="pl"> 编 剧 </span> : 
«a href="#"> 珍 妮 弗 . 李 </a> / 
«a href="#"> 菲 尔 * 约 翰 斯 顿 </a> 
</span> 
<span> 
<span class="pl"> 主 演 </span> : 
«a href="#"> 简 : 林 奇 </a> 
<a href="#"” rel="v:starring"> 约 翰 .C: 赖 利 </a> / 
<a href-"" rel="v:starring"> 萨 拉丝 沃 曼 </a> / 
</span> 
<span class="pl"> 类 型 :</span> 
<span property: genre"> 喜 剧 </span> / 
<span property="v:genre"> 动 画 </span> 
<span class="pl"> 官 方 网 站 :</span> 
<a href="#" rel="nofollow" target=" blank"»disney.go.com/wreck- 
it-ralph«/a» 
«span class="pl"> 制 片 国家 /地 区 :</span> 
美国 
«span class="pl"> 语 言 :</span> 
英语 
<span class="pl"> 上 映 日 期 :</span> 
<span property="v:initialReleaseDate" content="2012-11-02"> 
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2012-11-02 (美国 ) </span> 

<span class="pl"> 片 长 :</span> 

<span property-"v:runtime" content="108">108 分 钟 </span> 

<span class-"pl"»2X 4:«/span» 

破坏 王 拉 尔 夫 / 破坏 王 大 冒险 

<span class="pl">IMDb 链接 :</span> 

<a href="#" target=" blank" rel="nofollow">tt1772341</a> 
<p> 无 敌 破坏 王 CAE -C UR] John C. Reilly 配音 ) 生活 在 一 个 80 年 代 出 品 的 低 精度 游戏 

中 。 他 的 设 定 身份 是 一 个 反派 ， 每 天 的 生活 就 是 在 游戏 《快手 阿 修 》 中 大 搞 破 坏 ， 其 后 由 玩家 操作 

的 英雄 入 物 快手 阿 修 .…</p> 

</div> 
</div> 

</div> 

这 是 一 段 互联 网 上 真实 的 代码 (来 自 豆 辩 电 影 )， 我 们 可 以 看 到 ， 这 段 代码 虽然 简单 ， 
但 却 很 完整 : 有 div 和 span 这 样 的 容器 类 型 的 无 语义 标签 ， 有 链接 (a) 也 有 图 片 (img)， 
也 有 段落 , 还 有 一 些 不 常用 的 属性 rel 和 content 等 等 。 这 段 代 码 只 完成 了 一 件 事 儿 : 将 《无 
敌 破坏 王 》 的 简要 介绍 结构 化 成 文本 。 基 本 上 , "hie HTML 能 做 的 事 儿 其 实 也 就 只 有 这 一 
fF: 承载 〈 结 构 化 的 ) 信息 。 

HTML 并 不 是 一 门 编程 语言 ， 因 此 它 不 适合 用 来 表达 则 辑 ， 但 是 却 十 分 适合 作为 结构 
化 信息 的 载体 。 笔 者 资质 尚 线 ， 不 敢 冒 充 权 威 给 HTML 扣 上 什么 大 帽子 ， 如 果 我 来 定义 ， 
HTML 其 实 就 是 承载 信息 《资源 ) 的 载体 ， 淘 宝 的 商品 页 承载 了 商品 的 价格 购买 等 信息 ， 
百度 的 搜索 结果 页 承载 了 和 关键 词 相关 的 结果 页 的 摘要 信息 …… 

很 多 人 初学 HTML 的 时 候 ， 可 能 会 觉得 它 很 简单 ， 不 就 是 几 个 标签 拼 拼 凑 凑 组 成 一 个 
可 看 可 用 可 动 的 网 页 了 么 ， 再 学 点 CSS， 学 点 JavaScript， 改 改 字体 改 改 颜色 ， 加 上 点 动画 
炫 炫 技 ， 一 件 漂亮 的 作品 就 呈现 出 来 了 。 但 实际 上 HTML 并 不 是 那么 简单 的 东西 ， 而 它 的 
不 简单 ， 首 先 来 自 于 一 些 广为人知 的 误解 。 


1. HTML 是 用 浏览 器 来 显示 的 文件 


一 个 极 大 的 误区 。 对 于 HTML 本 身 而 言 ， 其 实 并 没有 任何 可 以 显示 的 东西 ， 它 只 
a dg ty 这 段 信息 如 何 显 示 ， 由 谁 来 显示 对 HTML 本 身 来 说 并 不 
重要 ， 它 也 不 关心 。 而 解读 HTML 的 具体 客体 ， 通 常 被 称 为 用 户 代 理 (UserAgent)， 对 于 
绝 大 多 数 情 况 而 言 ， 用 户 代 理 就 是 我 们 的 常见 的 网 页 浏览 器 一 一 Chrome、Firefox 和 IE, 
当然 也 包括 当今 五 花 八 门 的 手机 浏览 器 。 用 户 代 理 决定 了 HTML 该 怎样 显示 ， 比 如 em 标 

签 内 的 文字 应 该 被 显示 为 斜体 ，strong 标签 被 显示 为 黑体 等 等 。 甚 至 用 户 代理 并 不 一 定 要 
“< 显示” HIML， 对 于 抽象 的 信息 ,“ 看 ”只 是 接受 信息 的 一 种 方式 ， 对 于 盲人 用 户 而 言 ， 
他 们 上 网 就 必须 要 依赖 屏幕 阅读 器 或 者 吉文 阅读 器 这 样 的 用 户 代理 ， 所 以 ，HTML 所 表达 
的 ， 只 是 抽象 的 信息 。 


2. DIV+CSS 就 是 Web 标准 


在 DIV+CSS 时 代 之 前 还 有 个 table 时 代 ， 在 浏览 器 里 决定 布局 效果 大 家 多 由 table 来 
做 ， 而 突然 某 天 浮动 布局 等 技术 被 发 明 出 来 后 ， 没 有 语 patti 
式 的 div 标签 成 为 了 所 有 人 的 避风 港 ， 大 家 也 不 再 过 多 学 习 HTML 里 面 还 有 哪些 标签 ， 
不 去 深究 为 什么 有 这 么 多 标签 。DIV 再 加 上 同样 没有 语义 和 样式 的 span 标签 ,一 张 Sin 
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Web 标准 ”的 页 面 就 写 好 了 。 

实际 上 ， 这 种 理解 的 误区 和 前 面 说 到 的 “显示 ”问题 是 一 样 的 。HTML 之 所 以 提供 那 
么 多 标签 ， 实 际 上 是 为 了 更 好 地 结构 化 信息 。 而 Web 标准 的 精髓 也 不 仅仅 在 于 内 容 结 构 、 
表现 和 行为 的 分 离 ， 更 在 于 提供 结构 化 整个 互联 网 信息 的 工具 。 


3. HTML 5 是 HTML 的 升级 版 ， 提 供 了 更 多 功能 


前 面 已 经 不 断 说 到 HTML 是 承载 信息 的 语言 ， 那 么 不 难 理解 ，HTML 5 其 实说 白 了 ， 
就 是 为 日 益 丰 富 的 信息 提供 更 简单 更 强大 的 描述 能 力 。 而 并 不 是 所 谓 多 了 几 个 标签 ， 多 了 
几 个 快捷 功能 那样 简单 。 也 更 能 理解 ,为 何 HTML 5 所 做 的 各 项 努力 ， 都 是 使 HTML 文档 
所 承载 的 信息 更 容易 的 被 所 有 人 访问 一 一 当然 ， 本 书 重点 要 讲 的 手机 Web， 也 是 HIML 5 
所 要 和 获 盖 的 重要 设备 之 一 。 

HTML 5 的 确 是 HTML 的 升级 版 ， 但 并 不 只 是 提供 多 几 个 功能 那样 简单 。 


1.8.3 Hi Web 标准 


不 得 不 说 ，Web 标准 这 词 儿 也 是 一 个 老生 常 谈 的 问题 了 。 可 能 提 及 Web 标准 ， 你 的 脑 
海里 会 跳出 W3C 组 织 、 委 员 会 、 微 软 、 谷 歌 和 XX 工作 组 这 些 名 词 ， 并 且 也 知道 Web 标 
准 是 个 好 东西 ， 遵守 它 就 能 实现 代码 “一 次 编写 到 处 运行 ”， 能 增强 页 面 语义 化 ， 能 提高 页 
面 可 访问 性 ， 还 能 治疗 腰酸 背 痛 腿 抽筋 ……。 嗯 ， 总 之 它 是 个 好 东西 ， 当 然 你 也 应 该 知道 
IE 这 个 游 走 于 标准 之 外 的 非 主流 老年 人 。 但 是 真 要 问 你 Web 标准 究竟 是 什么 ,意味 着 什么 ， 
还 真 不 一 定 能 说 出 几 名 所 以 然 来 。 在 我 看 来 ，Web 标准 的 制定 者 们 和 他 们 做 的 事情 对 我 们 
开发 人 员 来 讲 ， 是 功 在 千秋 、 利 在 万 代 的 好 事情 。 为 什么 这 样 说 ? 


1. 什么 是 Web 标准 


先 来 看 这 两 段 可 能 你 已 经 很 熟悉 的 经 典 代码 。 
时 光 倒流 到 十 多 年 前 ， 正 6 刚 出 生 不 久 的 时 候 ， 你 写 了 一 段 在 下 6 和 Firefox 下 可 以 
运行 的 处 理 按钮 单 击 的 代码 : 


var btn = document.getElementById('btn') 
var listener = function(e) { 


alert ( "十 年 之 前 ， 我 不 认识 你 ， 点 我 不 容易 ! t) 


) 
if(btn.addEventListener) ( 
btn.addEventListener('click', listener, false) 
) else if(btn.attachEvent) { 
btn.attachEvent('onclick', listener) 
} else { 
btn.onclick = listener 


} 

那 时 候 世 界 上 上 网 的 人 还 不 算 多 , 你 共 需 要 编写 11 行 代码 才能 兼容 市 面 上 大 部 分 浏览 
器 。 接 下 来 时 间 定 位 到 2013 年 ， 你 的 代码 需要 在 下 9. IE 10、Windows Phone IE, Firefox, 
Chrome, Safari, IOS Safari, Opera, Opera Mini, Android Browser, UC 和 360 浏览 器 等 
十 多 种 桌面 的 或 者 手机 端的 浏览 器 ， 此 时 你 需要 写 的 代码 : 
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var btn = document.getElementById ('btn-2013') 
var listener - function(e) ( 


alert ( "十 年 之 后 ， 我 们 是 朋友 ， 点 我 算 问 候 ! t) 


btn.addEventListener(type, handler, false); 


同样 是 覆盖 大 部 分 浏览 器 ， 你 需要 兼容 的 浏览 器 种 类 从 两 种 增加 到 了 十 多 种 ， 但 代码 
行 数 却 从 11 行 锐 减 到 5 行 。 没 错 ， 对 于 开发 者 来 讲 ，Web 标准 干 的 最 实惠 的 事 儿 ， 便 是 
降低 了 我 们 开发 的 复杂 度 。 也 许 事件 绑 定 这 个 简单 例子 还 不 足以 说 明 问题 ,但 你 看 看 Web 
标准 所 履 盖 的 技术 层面 就 知道 他 们 做 了 多 么 伟大 的 事情 。 


Web 可 访问 性 ,国际 化 ,移动 访问 ,设备 独立 , 质量 保证 


XML, Namespaces, Schemas, XQuery/XPath, A M, XML Base, XPointer, RDF/XML, SPARQL 
XML Infosets; RDF(S) Graphs 


Web Architectural Principles 


URI/IRI, HTTP 


One Web 


图 1.4 One Web 


从 图 1.4 中 我 们 可 以 看 到 ，Web 标准 涵盖 了 非常 广 的 技术 领域 ， 包 含 且 不 限于 浏览 
相关 技术 。 试 想 一 下 ， 如 果 没有 人 去 做 技术 标准 化 ， 那 么 不 同 厂商 的 产品 一 一 不 论 是 软件 


产品 还 是 硬件 产品 一 一 都 各 自给 出 一 套 接口 和 技术 来 提供 相同 的 功能 ， 那 全 世界 的 开发 者 
们 得 有 多 痛苦 …… 


2. 谁 在 制定 标准 


就 W3C 组 织 所 提倡 的 而 言 ， 任 何 公司 、 组 织 和 个 人 都 可 以 为 其 贡献 标准 ， 但 通常 大 
部 分 标准 都 是 由 来 自 一 些 大 公司 或 者 浏览 器 公司 的 工程 师 和 科学 家 所 拟定 ， 诸 如 谷歌 、 微 
$k, ER, Adobe 和 Mozilla 等 公司 ， 原 因 也 很 简单 : 因为 他 们 经 验 丰 富 ， 专 业 度 高 。 但 
作为 平头 老百姓 的 我 们 也 是 可 以 参与 到 标准 制定 当中 去 的 ,一 般 来 说 可 以 通过 加 入 邮件 组 ， 
并 发 建议 信 或 者 参与 邮件 组 讨论 的 方式 来 参与 到 标准 制定 过 程 中 去 。 

除了 W3C 组 织 外 , 也 有 一 些 其 他 组 织 也 在 制定 Web 标准 , 最 出 名 的 莫 过 于 WHAT T. 
作 组 了 ， 当 前 HTML 5 相关 标准 工作 方面 就 由 WHATWG 和 W3C 所 主导 。 


3. 哪些 标准 需要 你 关注 
这 些 被 标准 化 或 者 正在 被 标准 化 的 技术 ， 最 终 都 会 落实 到 具体 的 文档 上 来 ， 对 于 前 端 


。10 。 
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工程 师 或 者 立志 成 为 前 端 工程 师 的 你 而 言 ， 图 1.4 中 涉及 到 的 绝 大 部 分 标准 无 需 关注 的 ， 
你 需要 关注 的 内 容 参见 图 1.5。 
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图 1.5 涉及 前 端的 Web 标准 
以 HTML 标准 为 中 心 , 扩展 出 几 个 大 类 的 技术 标准 ， 目 前 你 还 不 用 搞 清楚 它们 究竟 是 
什么 做 什么 的 。 因 为 ， 如 果 你 已 经 无 比 清楚 了 的 话 ， 这 本 书 你 就 白 买 了 一 一 我 们 会 在 本 书 
剩余 部 分 详细 介绍 这 些 标准 所 涉及 的 技术 。 虽 然 品 类 看 起 来 繁杂 ， 但 只 要 掌握 了 其 中 的 核 
心 知识 ， 其 他 都 是 触 类 旁 通 ， 所 以 也 不 用 害怕 这 些 乱 七 八 糟 的 名 词 。 
4. 为 何 HTML 5 胜出 


前 面 图 1.5 中 提 到 的 HTML 4.01 是 HTML 最 后 一 个 成 文 的 推荐 标准 。 在 HTML 4.01 
后 ， 出 现 了 两 派 观点 ， 一 派 是 希望 更 加 严格 的 XHTML 能 够 取代 HIML， 另 一 派 则 是 希望 
HTML 能 够 持续 演进 ， 并 能 很 好 地 向 下 兼容 一 一 也 就 是 HIML 5 了 。 显 然 XHTML 在 执行 
上 遇 到 很 大 的 阻力 ， 因 为 敦促 互联 网 上 所 有 的 网 站 都 修改 成 XHTML 兼容 显然 不 是 一 个 小 
小 的 公益 组 织 能 干 下 来 的 活 儿 , 而 且 也 费力 不 讨好 。 主要 原因 就 是 XHTML 规则 太 过 严 苛 ， 
移植 成 本 非常 大 ， 而 且 HTML 语法 本 身 简 单 易 懂 ， 在 开发 人 员 中 已 经 非常 普及 ， 再 去 学 习 
XHTML 也 不 是 一 件 经 济 的 事情 ， 而 修改 为 XHTML 对 单个 网 站 本 身 也 没有 什么 本 质 的 改 
变 。 但 HIML 5 则 显得 非常 友好 ， 不 仅 兼容 HTML 之 前 的 版 本 ， 并 且 提 供 了 大 量 新 功能 ， 
很 快 HTML 5 就 受到 人 们 的 欢迎 。 

当然 ， 一 项 技术 的 胜出 显然 不 是 简单 地 因为 它 在 某 几 方面 的 优点 ， 通 常 还 会 来 自 社区 
的 声音 ， 来 自 巨头 们 的 角力 一 一 乔布斯 曾 炮 友 Flash， 并 且 不 允许 在 IOS 设备 上 运行 Flash 
便 是 一 个 显著 的 例子 ,苹果 对 HTML 5 的 投入 , 使 得 HTML 5 在 移动 设备 上 (包括 Android) 
也 很 快 成 为 了 领航 者 。 
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1.3.4 ”如 何 理解 Web 语义 化 


也 许 你 或 多 或 少 都 听 说 过 Web 语义 化 这 个 概念 ， 或 许 也 知道 HTML 5 相对 于 HTML 
之 前 的 版 本 重大 的 改进 就 在 于 增加 了 许多 语义 化 的 标签 (如 header 和 footer 等 )。 不 过 在 
学 习 这 些 具体 的 标签 之 前 ， 我 们 有 必要 重新 认识 一 下 什么 叫 Web 语义 化 。 

Web RAZR d: S E Weaving the Web 一 书 中 说 过 : 

“如 果 说 HTML 和 Web 将 整个 在 线 文档 变 成 了 一 本 巨大 的 书 ， 那 么 RDF、schema 和 
inference languages 将 会 使 世界 上 所 有 的 数据 变 成 一 个 巨大 的 数据 库 。” 

1998 ERLITTEN (Semantic Web) 的 概念 ， 他 在 描绘 Web 的 今生 后 世 时 ， 
已 经 深刻 阐释 了 语义 网 的 未 来 意味 着 什么 一 一 一 个 集合 全 世界 信息 并 能 为 人 所 用 的 数据 库 。 

所 谓 “ 语 义 的 ”(Semantic)， 这 词 儿 是 指 有 意思 的 或 者 与 之 相关 的 。 而 语义 网 的 核心 
是 通过 给 万 维 网 上 的 文档 (如 HTML) 添加 能 够 被 计算 机 所 理解 的 元 数据 (Meta data), 
从 而 使 整个 互联 网 成 为 一 个 通用 的 信息 交换 媒介 。W3C 的 “语义 网 远景 (Semantic Web 
Vision)” 的 目标 是 : 

口 Web 信息 拥有 确切 的 含义 ; 

口 Web 信息 可 被 计算 机 理解 并 处 理 ; 

口 计算 机 可 从 Web 上 整合 信息 。 

上 面 这 些 话 可 能 稍 显 抽象 ， 若 翻译 成 白话 来 讲 ， 语 义 化 就 是 让 机 器 能 理解 内 容 。 不 过 
首先 要 和 弄 明 白 的 是 以 下 内 容 。 


1. 为 什么 我 们 需要 机 器 能 理解 内 容 


在 Web 初生 的 时 期 , 整个 互联 网 上 都 还 没有 太 多 的 内 容 ， 这 些 内 容 几乎 都 在 一 些小 范 
围 传播 〈 比 如 李 事 士 工 作 过 的 物理 实验 室 )， 依 靠 人 肉 和 简单 的 程序 都 还 能 处 理 的 过 来 。 随 
着 Web 规模 的 不 断 扩 大 ， 内 容 不 断 增多 ， 查 找 内 容 越 来 越 依靠 机 器 ， 于 是 搜索 引擎 被 发 明 
出 来 ， 用 于 抓 取 整 个 Web 的 内 容 供 人 检索 和 过 滤 。Web 的 内 容 几乎 都 是 依靠 HTML 格式 
来 发 布 ， 人 来 阅读 当然 是 没有 任何 问题 的 ， 但 最 初 HIML 格式 包含 的 语义 信息 又 特别 弱 ， 
给 机 器 处 理 带 来 了 很 多 麻烦 。 
举 个 例子 来 说 ， 假 设 我 们 有 这 样 两 段 代 码 ， 一 段 是 普通 的 HTML 代码 : 
«div» 
«div class="bigfont"><b> 乔 布 斯 </b></div> 
<div> 
<a href="www.apple.com"> 苹 果 </a> 的 
<span> 创 始 人 </span> 
<span> 享 年 56 岁 </span>， 
«div»1976 年 乔布斯 和 朋友 成 立 苹果 电脑 公司 ， 他 陪伴 了 苹果 公司 数 十 年 的 起 落 与 复兴 。</div> 
<div> 先 后 领导 和 推出 了 麦 金 塔 计算 机 、iMac、iPod、iPhone 等 风靡 全 球 亿 万 人 的 .<Vdiv> 


</div> 
</div> 
另 一 段 是 我 们 假想 的 增加 了 很 多 种 标签 的 HTML 代码 : 
<people> 


<h4><name> 乔 布 斯 </name></h4> 
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<a href="www.apple. com"><company> 苹 果 </company></a> 的 

<position> 创 始 人 </position> 

享年 <liveage>56 岁 </liveage>， 

<introduction> 
«p»1976 年 乔布斯 和 朋友 成 立 苹果 电脑 公司 ， 他 陪伴 了 苹果 公司 数 十 年 的 起 落 与 复兴 。</p> 
<p> 先 后 领导 和 推出 了 麦 金 塔 计算 机 、iMac、iPod、iPhone 等 风靡 全 球 亿 万 人 的 .….</p> 

</introduction> 

<p></p> 

</people> 


不 出 意外 的 话 ， 这 两 段 代码 在 浏览 器 中 的 最 终 显 示 效 果 是 相同 的 (需要 一 些 简单 的 
置 样式 )， 如 图 1.6 所 示 。 


zd 


乔布斯 

ERW 创始 人 享年 56 岁 ， 

1976 年 乔布斯 和 朋友 成 立 苹果 电脑 公司 ， 他 陪伴 了 苹果 公司 数 十 年 的 起 落 与 复兴 。 
先后 领导 和 推出 了 麦 金 塔 计算 机 、iMQaC、iPod、iPhone 等 风靡 全 球 亿 万 人 的 …… 


乔布斯 

的 创始 人 享年 56 岁 ， 

6 年 乔布斯 和 朋友 成 立 苹果 电脑 公司 ， 他 陪伴 了 苹果 公司 数 十 年 的 起 落 与 复兴 。 
先后 领导 和 推出 了 麦 金 塔 计算 机 、iMac、iPod、iPhone 等 风靡 全 球 亿 万 人 的 …… 


图 1.6 不 同 HIML， 同 样 显示 效果 


对 于 正常 的 人 类 而 言 ， 阅 读 这 两 段 文档 获取 到 的 信息 也 应 该 是 一 模 一 样 的 一 一 别 告诉 
我 你 阅读 第 二 段 文字 时 更 加 悲伤 一 一 我 们 进一步 假设 ， 互 联网 上 现在 有 成 千 上 万 的 这 样 的 
人 物 信息 以 及 其 他 的 信息 , 用 这 样 的 HTML 片段 分 散在 不 同 的 网 站 上 ,， 如果 你 想 要 从 中 间 
找 出 其 中 属于 苹果 公司 的 56 岁 的 人 ， 以 90 年 代 末 的 互联 网 规模 ， 靠 肉眼 完成 这 项 工作 已 
经 是 难于 上 青天 了 ， 这 时 候 就 需要 借助 计算 机 程序 的 力量 了 。 


2. Emir 


JE di fe (Web crawler) 是 一 种 自动 访问 互联 网 页 面 并 收集 信息 以 供 人 们 检索 的 程序 
疏 虫 算是 一 个 搜索 引擎 的 基本 组 成 部 分 ， 它 一 般 以 一 个 网 页 主页 面 为 入 口 ， 通 过 页 面 上 的 
链接 一 层 一 层 地 疏 取 所 有 的 子 页 面 ， 最 终 获 得 所 有 可 见 页 面 的 信息 。 对 于 疏 虫 而 言 ， 爬 取 
到 的 内 容 它 是 不 理解 其 含义 的 一 一 对 于 计算 机 来 讲 ， 人 类 语言 基本 上 是 不 可 理解 的 ， 因 此 
完成 “查找 苹果 公司 56 岁 员工 ”这 项 任务 ， 如 果 没 有 元 数据 (metadata) 的 帮助 ， 计 算 机 
几乎 是 不 可 能 完成 的 。 在 上 面 的 例子 中 ， 第 一 段 的 元 数据 几乎 没有 ， 你 通过 程序 甚至 只 能 
判断 出 这 段 文字 是 和 苹果 公司 有 关 的 文字 (因为 中 间 有 指向 苹果 的 链接 )。 而 第 二 段 的 标签 
(虽然 是 我 们 虚构 的 ) 则 提供 了 非常 丰富 的 元 数据 , 如 果 所 有 的 人 物 信息 都 用 类 似 的 标签 来 
发 布 内 容 ， 那 么 我 们 要 在 海量 的 信息 里 检索 出 人 物 的 信息 ， 进 而 对 人 物 信息 进行 分 类 和 得 
选 等 处 理 都 是 非常 方便 的 。 

除了 有 息 虫 程序 ， 诸 如 浏览 器 这 样 的 程序 对 内 容 的 理解 也 是 很 有 用 的 。 由 于 文档 有 了 语 
义 ， 那 么 浏览 器 可 以 根据 不 同 的 语义 选择 不 同 的 呈现 。 一 个 最 简单 的 例子 就 是 无 序列 表 和 
有 序列 表 ， 对 于 一 个 有 序列 表 ， 浏 览 器 可 以 自动 为 列表 前 面 加 上 1,2,3 这 样 的 数字 ， 这 样 
文档 将 更 具备 可 读 性 ， 甚 至 在 某 些 拉丁 语言 的 国家 里 ， 浏 览 器 可 以 自动 将 有 序列 表 前 加 上 
abc 这 样 的 字母 ， 以 便 更 加 本 地 化 。 所 以 ， 让 计算 机 更 容易 地 理解 内 容 ， 最 终 还 是 为 了 人 
类 服务 。 
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除 此 之 外 ， 语 义 化 的 代码 ， 对 做 开发 的 人 也 有 帮助 一 一 这 和 变量 命名 程序 风格 也 是 一 
个 道理 ， 满 篇 div RÆ HEHU a、b2 和 c4 这 样 的 class 和 id 的 代码 不 仅 毫 无 语义 可 言 ， 
对 其 他 开发 者 也 都 是 不 可 理解 的 ， 增 加 了 协作 成 本 ， 甚 至 这 份 代码 创建 者 自己 将 来 修改 代 
码 时 也 会 痛苦 不 堪 ， 进 一 步 增 加 了 维护 成 本 。 

可 以 说 ，Web 标准 在 很 大 程度 上 都 是 在 为 Web 语义 化 服务 的 。 而 语义 网 则 是 Web 的 
远景 目标 。 也 可 以 说 是 万 维 网 的 精髓 一 一 一 个 能 理解 人 类 语言 ， 和 人 类 自然 交流 ， 并 为 人 
类 服务 的 智能 网 络 。 


1.3.5 HTML 5 和 语义 网 


大 多 数 人 提 到 语义 化 都 会 提 及 HTML 5 一 一 没 错 ，HTML 5 的 确 为 承载 的 内 容 提 供 了 
相 比 于 之 前 版 本 更 强 的 语义 ， 但 是 HTML 5 并 不 是 唯一 为 语义 网 做 贡献 的 标准 。 
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相信 图 1.7 这 个 亮 闪 闪 的 logo 你 已 经 在 很 多 地 儿 都 见 过 了 , 而 这 个 logo 的 背后 隐藏 着 
多 少 辛酸 往事 ， 多 少 勾心斗角 ， 多 少 尔 虞 我 诈 …… 你 未 必 都 能 道 出 个 来 龙 去 脉 ， 讲 出 个 一 


h—T. 
HTML 


图 1.7 HTML 5 logo 
本 节 将 彻 彻底 底 让 你 认 清 我 们 HTML 5 这 位 主角 家 底 几 斗 ， 能 耐 几 何 。 
1.4.1 BH HTML 5 那些 旧事 


1. HTML vs. XHTML 


1991 年 HTML 第 一 个 标准 出 现 , 到 1997 年 HTML 4 定稿 , 之 后 十 年 HTML 标准 一 直 
停滞 不 前 。W3C 则 将 全 部 精力 投入 了 XHTML 的 开发 ， 停 止 了 对 HTML 的 关注 。 所 谓 
XHTML， 即 Extensible Hypertext Markup Language， 翻 译 过 来 就 是 可 扩展 超 文 本 标记 语言 ， 
实际 上 就 是 XML 和 HTML 的 合体 怪物 , 对 于 开发 人 员 来 说 , 就 是 要 记 住 双 引号 括 住 属性 、 
MEIRE AARRE, EMRE, TKH Doctype 定义 …… 。 有 个 关于 XHTML 很 传神 
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的 比喻 。 
想象 一 下 XHTML 就 如 同 你 屠 位 特 爱 四 四 的 外 婆 ， 每 次 见 到 你 都 会 让 你 清洗 牙 占 、 告 
诚 你 坐 有 坐姿 站 有 站 姿 、 记 得 注意 安全 、 注 意 身 体 …… 


更 讽刺 的 是 ， 这 些 XHTML 烦人 的 规范 即使 你 的 网 页 一 一 遵守 了 ， 浏 览 器 也 不 会 真正 
关心 一 一 绝 大 多 数 网 站 依然 都 是 用 text/html 的 MIME type 进行 提供 , 浏览 器 依然 把 你 的 网 
页 视 为 HTML 网 页 。 

即便 如 此 ，W3C 依然 着 魔 于 XHTML， 他 们 甚至 关 掉 了 HTML 工作 组 ， 以 便 更 专注 
于 XHTML 标准 。XHTML 1.1 诞生 时 修复 了 很 多 HTML 时 代 的 错误 ， 并 也 能 很 好 地 向 下 
兼容 。 但 W3C 完全 不 满足 于 此 ，XHTML 2.0 则 完全 想 与 HTML 划 清 界限 ， 完 全 不 准备 兼 
容 HTML 4， 企 图 “修复 ”整个 Web 一 一 这 完全 站 在 了 广大 人 民 群 众 的 对 立 面 。 

终于 ，W3C 的 空想 主义 大 跃进 政策 激 起 了 “民愤 ”。2004 年 ,一 小 撮 来 自 苹果 、Opera 
和 Mozilla 基金 会 的 工程 师 们 成 立 了 WHATWG ( 即 前 文 说 到 的 WHAT TEH), 率先 发 起 
HTML 5 标准 。 而 与 此 同时 ，W3C 还 在 XHTML 这 条 不 归 歧 途上 蹦 踊 前 行 ， 越 走 越 远 。 

WHAT 工作 组 对 于 新 标准 的 制定 有 两 个 黄金 准则 ; 

口 必须 向 下 兼容 一 一 万 万 不 能 忽略 已 有 的 Web 世界 。 

口 标准 和 实现 必须 相互 匹配 一 一 这 意味 着 标准 文档 必须 尽 可 能 详尽 。 

基于 这 两 个 准则 ，WHAT 工作 组 做 了 大 量 的 工作 。 到 2006 年 10 月 ，W3C 终于 宣布 
与 WHATWG 合作 研发 HTML 5 相关 技术 标准 (即便 如 此 ，W3C 依然 对 XHTML 恋恋 不 
舍 ， 直 到 2009 年 才 完 全 抛弃 XHTML 2.0). 

2008 E, HTML 5 终于 发 布 第 一 份 草案 ， 同 年 Firefox 率先 开始 支持 HTML 5， 很 快 
Chrome, Safari 甚至 IE 等 浏览 器 也 相继 加 入 HTML 5 阵营 。 值 得 注意 的 是 ，HTML 5 自 第 

-个 草案 就 提出 自己 是 一 项 持续 发 展 的 技术 ， 不 会 有 真正 “完成 ”的 一 天 ， 所 以 无 论 何 时 
投入 HTML 5 的 怀抱 都 不 会 过 时 的 。 


2. HTML 5 vs Flash 


真正 让 HTML 5 迅速 进入 广大 开发 者 甚至 普通 消费 者 目光 中 的 契机 要 数 乔布斯 发 表 炮 
3 Flash 的 公开 信 这 事 儿 了 ,《 关 于 Flash 的 几 点 思考 》 一 文中 主要 提 到 了 六 点 为 何 HIML 5 
相 比 Flash 更 适合 移动 设备 的 原因 : 

O 更 开放 一 一 从 定价 到 功能 ，Flash 由 Adobe 一 家 公司 掌控 ,而 HTML 5 则 完全 开放 
并 由 标准 委员 会 所 控制 。 

口 没 你 我 也 活 得 很 好 一 一 没 了 你 Flash 我 一 样 可 以 看 视频 和 玩 游戏 。 

口 可 靠 、 安 全 和 高 性 能 一 一 含 泪 控诉 劣迹 斑斑 的 Flash 在 Apple 设备 上 的 各 种 漏洞 史 、 
骨 溃 史 和 性 能 瓶颈 史 。 

口 电池 寿命 一 一 Flash 你 是 个 可 怕 的 电 老 虎 ! 

口 触摸 一 一 Flash 本 身 是 为 使 用 鼠标 的 桌面 电脑 设计 ， 而 不 是 为 使 用 手指 的 触摸 屏 。 
HTML 5-JavaScript-CSS 显然 是 更 加 现代 化 的 技术 。 

O 开发 者 和 平台 之 间 不 应 该 再 多 一 层 软 件 一 一 Apple 希望 用 户 用 上 最 优 的 应 用 , 而 不 
是 为 了 “ 跨 平台 ”而 采用 Flash。 在 移动 纪元 ，HTML 5 会 在 移动 设备 上 赢得 最 终 
胜利 (当然 ，PC 也 是 ) 。 

可 以 说 就 是 2010 年 4 月 的 这 封 信 把 HTML 5 推 上 了 风口 浪 尖 ， 各 大 网 站 也 乘 着 浪头 
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纷纷 开始 支持 HIML 5, 各 种 HTML 5 的 实验 站 点 也 如 雨后春笋 般 出 现 。 而 iOS 和 Android 
两 大 移动 阵营 都 对 HTML 5 有 着 强力 的 支持 ,进一步 使 得 HTML 5 在 移动 设备 上 大 放 异 彩 。 
国外 的 YouTube, WHF Twitter， 国 内 的 优酷 和 京东 等 都 纷纷 推出 纯 基 于 HTML 5 打造 
的 页 面 ， 截 止 到 2011 年 9 月 ，Alex 排名 前 100 的 网 站 中 已 经 有 34% 开 始 使 用 HIML 5 dx 
术 。2011 年 11 月 ， 被 喷 的 很 惨 的 Adobe 终于 也 宣布 结束 移动 设备 上 的 Flash 开发 工作 ， 
转 而 开发 HTML 5 工具 。 


1.4.2 为 移动 而 生 


在 乔布斯 为 iOS 设备 狂 喷 Flash 而 大 赞 HTML 5 之 际 ， 已 经 注定 了 HTML 5 是 一 项 为 
移动 设备 而 生 的 技术 。 前 文 提 到 的 关于 HTML 5 的 六 个 优点 已 经 充分 说 明 在 移动 设备 上 
HTML 5 技术 是 不 二 之 选 。 

1. 从 系统 无 关 到 设备 无 关 


在 过 去 ， 系 统 无 关 一 直 是 个 大 问题 。 一 个 程序 在 Linux 平台 可 以 跑 ， 在 Windows 系统 
下 就 运行 不 起 来 了 ， 更 不 要 提 MacOS， 甚 至 在 Linux/Windows 不 同 发 行 版 之 间 都 不 能 顺畅 
地 运行 。Web 的 出 现 从 某 种 意义 上 而 言 改变 了 这 一 现状 。Web 从 一 诞生 起 就 是 跨 平 台 
的 一 一 是 真正 的 跨 平台 ， 真 正 意义 上 的 “一 次 编写 ， 到 处 运行 ”。 

无 论 是 Linux/Windows/Mac， 还 是 别 的 什么 稀奇 古怪 的 操作 系统 ， 他 们 无 一 都 有 着 跨 
平台 的 浏览 器 软件 (Firefox 和 Chrome)， 通 过 浏览 器 ， 可 以 在 这 些 平台 上 运行 各 种 各 样 的 
Web 程序 一 一 你 的 HIML+CSS+JavaScript 永远 都 能 够 运行 ! 这 得 益 于 Web 从 一 开始 就 是 
由 开放 的 技术 构建 起 来 的 缘故 。 

而 到 了 移动 时 代 , 不 仅 操 作 系 统 丰 富 多 彩 一 一 Blackberry、 Palm WebOS、Nokia/Symbian、 
Windows Mobile, bada 和 MeeGo 等 等 ， 设 备 种 类 更 是 五 花 齐 放 一 一 下 至 两 三 寸 的 迷你 手 
机 ， 上 至 5 寸 的 三 星 Node, 还 有 乱七八糟 的 平板 、Pad 和 Surface…… 相 比 于 过 去 的 PC 操 
作 系统 大 战 时 代 完 全 是 有 过 之 而 无 不 及 。 此 时 ， 想 要 完全 兼容 各 个 设备 ， 无 疑 只 能 选择 
Web f. 

而 在 HTML 5 出 现 之 前 ， 移 动 设备 虽然 支持 Web， 也 能 正常 上 网 ， 但 访问 体验 上 巨大 
问题 来 源 于 小 小 的 屏幕 以 及 鼠标 的 缺失 一 一 过 去 的 Web 是 为 桌面 电脑 设计 的 , 来 到 小 屏幕 
设备 上 ， 页 面 缩小 、 手 指点 触 不 准 、 格 式 错乱 和 速度 缓慢 等 等 问题 接 踊 而 至 。 为 了 使 Web 
在 移动 设备 上 更 好 地 呈现 ，WAP 协议 (Wireless Application Protocol) 被 设计 出 来 ， 并 基于 
XHTML 定义 了 WML (Wireless Markup Language，WML 使 用 WMLScript 在 客户 端 运行 
简单 的 代码 。WMLScript 是 一 种 轻 量 级 的 JavaScript 语言 。) 语言 ， 用 以 在 移动 设备 上 交换 
数据 。 在 某 一 段 时 间 里 ， 这 似乎 被 认为 是 个 很 好 的 选择 ， 但 不 久 后 各 种 问题 也 暴露 出 来 : 

口 作为 网 站 版 主 ， 你 不 得 不 开发 和 维护 两 套 程序 ， 一 套 为 PC， 一 套 为 手机 。 

口 对 于 程序 员 ， 你 又 得 学 习 一 套 新 的 标记 语言 ， 即 WMLScript。 

O 随 着 设备 性 能 的 提升 和 功能 的 丰富 ，WAP 网 站 又 显得 过 于 简单 了 。 

还 好 ， 有 HTML 5 来 试图 诊治 这 些 疑 难 杂 症 。W3C 提出 了 “one web” 的 概念 ， 以 求 
同一 个 网 站 在 各 种 设备 中 都 能 良好 显示 ，HTML 5 相关 技术 便 在 这 个 方向 上 努力 ， 比 较 突 
出 的 便 是 CSS 3 的 media query 技术 。 除 此 之 外 ，HTML 5 也 据 弃 了 WAP 那 一 套 理念 ， 向 
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下 兼容 HTML 和 JavaScript (因为 HTML 5 本 来 就 是 HTML)， 降 低 了 程序 员 的 学 习 成 本 ， 
同时 也 降低 了 开发 成 本 和 维护 成 本 ， 以 求 做 到 真正 的 程序 与 设备 无 关 。 


2. HTML 5 如 何 改变 Web 开发 的 局 限 性 


Web 开发 在 过 去 有 非常 多 的 局 限 ， 尤 其 是 安全 和 设备 访问 相关 的 部 分 。 相 比 于 传统 的 
桌面 Web 开发 , 基于 HTML 5 可 以 方便 地 构建 类 似 传统 客户 端 软件 的 网 页 App， 可 以 访问 
磁盘 系统 和 摄像 头等 敏感 设备 ， 轻 松 将 桌面 软件 擅长 的 领域 带 入 了 Web 的 世界 。 

对 于 当前 的 主流 移动 设备 而 言 〈 而 我 们 尤为 关注 的 ， 是 手机 和 平板 电脑 )， 定 位 、 触 
摸 和 传感器 是 其 重要 特点 ， 而 HTML 5 在 这 些 方面 也 有 鼎力 的 支持 。 可 以 说 ，HTML 5 fi 
扫 了 过 去 Web 开发 中 的 种 种 痛 点 ， 将 Web 开发 带 入 了 新 的 纪元 。 


1.4.3 ”你 应 该 知道 的 HTML 5 


HTML 5 从 技术 层面 来 讲 带 来 了 八 个 类 别 的 新 东西 , W3C 还 专门 为 此 做 了 相应 的 Logo 
以 彰显 HTML 5 技术 的 时 各 气息 , 甚至 还 提供 了 logo 生成 器 可 以 生成 对 应 技术 的 代码 让 你 
可 以 为 自己 的 网 站 贴 上 炫 酷 的 HTML 5 标签 。 

图 1.8 从 左 至 右 ， 从 上 到 下 ， 分 别 代表 如 下 含义 : 


从 全 rS 
Cos 


(D 语义 网 CSemantics) 

帮助 HTML 更 好 实现 地 结构 化 和 语义 化 可 以 说 是 HTML 5 首要 和 核心 的 增强 。 具体 来 
说 就 是 提供 了 一 组 丰富 的 语义 化 标签 ， 包 括 header 和 footer 等 ， 以 及 配合 使 用 RDFa、 
microdata 和 microfomat 等 的 能 力 。 这 使 得 用 户 和 机 器 程序 都 能 从 中 获 益 。 

(2) 离线 & 存 储 COffline & Storage) 

HTML 5 App Cache. Local Storage. Indexed DB 和 File API 这 些 技术 标准 使 得 Web 应 
用 程序 更 加 迅速 ， 并 提供 了 离线 使 用 的 能 

(3) 设备 访问 (Device Access) 

设备 感知 能 力 的 增强 使 得 Web 也 能 实现 诸多 传统 应 用 程序 的 功能 , 在 手机 这 样 的 移动 
设备 中 更 是 如 此 。Orientation API 可 以 访问 重力 感应 ，Geolocation API 能 定位 设备 ， 音 视 
频 方面 甚至 能 访问 麦克 风 和 摄像 头 ， 而 本 地 数据 方面 则 可 以 和 联系 人 列表 以 及 日 历 等 功能 
对 接 ， 你 的 应 用 不 再 受制 于 设备 权限 ， 而 只 受制 于 你 的 想象 力 。 

(4) 通信 (Connectivity) 

通信 能力 的 增强 意味 着 你 的 聊天 程序 实时 性 会 更 高 ， 你 的 网 络 游戏 会 运行 地 更 顺畅 。 
Web Socket 以 及 Server-Sent Events 技术 使 得 客户 端 和 服务 器 端 之 间 的 通信 效率 达到 了 前 所 
未 有 的 高 度 。 你 ， 值 得 拥有 。 
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(5) 多 媒体 (Multimedia) 

音频 和 视频 能 力 的 增强 可 谓 是 HTML 5 的 杀手 铀 了 ， 也 使 得 Flash 逐渐 退 居 二 线 。 

(6) 图 形 和 特效 (3D，Graphics & Effects) 

HTML 5 另 一 个 置 Flash 于 死地 的 技术 特别 莫 属 在 图 形 方面 的 增强 ，SVG、Canvas 和 
WebGL 等 功能 使 得 图 形 演 染 变 得 高 效 而 方便 , 对 于 生成 图 表 、2D/3D 游戏 和 页 面 视觉 特效 
等 方面 可 谓 是 不 二 之 选 。 

CI) 性 能 和 集成 〈(Performance & Integration) 

让 用 户 等 待 是 很 可 耻 的 , Web Worker 的 出 现 使 得 浏览 器 也 可 以 多 线程 处 理 后 台 任 务 而 
不 阻塞 用 户 的 界面 泻 染 。 同 时 HTML 5 还 提供 了 性 能 检测 工具 方便 你 评估 程序 的 性 能 。 

(8) 呈现 (CSS 3 / styling) 

CSS 3 可 以 说 是 相 比 于 以 上 所 有 技术 更 新 中 最 让 人 激动 的 一 项 了 。 无 论 你 是 设计 师 还 
是 工程 师 ，CSS 3 可 以 很 方便 地 实现 许多 页 面 特效 而 且 尤 为 关键 的 是 ， 它 不 会 影响 页 
面 语义 和 性 能 。 

本 书 将 详细 讲解 上 面 八 类 技术 涉及 的 技术 细节 ， 并 特别 关注 这 八 类 技术 在 移动 设备 中 
的 应 用 。 不 过 要 提醒 读者 的 是 ， 虽 然 HTML 5 提供 了 如 此 多 且 强 大 的 新 特性 ， 但 HTML 5 
依然 不 是 解决 所 有 问题 的 弹 弹 ， 言 目地 全 盘 采 用 HTML 5 只 会 让 你 陷入 迷 藻 。 根 据 具 体 需 
求 、 资 源 和 问题 进行 合理 分 析 ， 正 确 合理 地 得 出 解决 方案 ， 才 是 最 明智 的 做 法 即使 身 
处 浪潮 之 里， 也 要 随时 小 心 脚下 的 暗流 流 涡 。 
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既然 是 学 习 HTML 5， 那 么 必然 抽 不 开 HTML 这 门 语言 本 身 。 本 章 将 详细 透彻 地 介绍 
HTML 本 身 和 它 的 第 五 个 版 本 引入 的 新 内 容 。 

也 许 你 已 经 有 一 定 的 HTML 编程 经 验 或 者 你 已 经 是 个 老 鸟 (大 神 就 兔 了 吧 ， 笔 者 向 您 
看 齐 )， 但 这 部 分 内 容 能 让 你 复习 你 已 有 的 知识 ， 甚 至 是 重新 审视 它们 ， 温 故而 知 新 ， 不 亦 
Bip? 


2.1 m HTML 


HTML 的 最 后 一 个 定稿 版 本 HTML 4 中 (http://www.w3.org/TR/html4/intro/intro.html) 
对 万 维 网 有 着 精确 的 定义 :; The World Wide Web (Web) is a network of information resources « 

意 即 Web 是 信息 资源 的 网 络 ( 第 1 章 中 说 过 ， 从 广义 而 言 ， 资 源 不 仅仅 是 信息 资源 )， 
而 这 个 网 络 的 工作 需要 三 种 技术 或 者 机 制 的 相互 配合 : 

O 用 于 表明 某 种 资源 在 Web 中 具体 位 置 的 唯一 标识 符 〈( 具 体 技术 如 : 统一 资源 标识 

符 URI) ; 

O 获取 资源 的 协议 〈 如 HTTP) ; 

O 对 资源 进行 导航 〈 如 HTML) 。 

这 三 种 机 制 所 对 应 的 具体 技术 我 们 可 能 已 经 熟悉 的 不 能 再 熟悉 了 。URI 非常 易于 理解 
TE]; HTTP 作为 传输 协议 包含 很 多 繁杂 的 内 容 ， 但 其 基本 原理 也 非常 简单 ， 在 此 亦 不 
TO 

但 如 果 告 诉 你 ，HTML 其 实 是 被 设计 用 来 更 容易 进行 资源 导航 的 玩意 儿 ， 还 真有 点 难 
以 接受 一 一 过 去 老师 们 都 告诉 我 ，HTML 就 是 用 来 写 网 页 的 东西 啊 ， 是 那 一 个 个 用 某 e F 
软件 打开 的 小 网 页 嘛 。 没 错 ，HTML 确实 是 网 页 ， 但 HTML 不 只 是 网 页 那么 简单 。 


2.1.1 HTML 能 干什么 


在 回答 HTML 是 什么 的 问题 上 ，HTML 4 标准 给 出 的 答案 是 : HTML 是 一 种 可 以 发 布 
信息 到 全 球 的 语言 , 一 种 所 有 人 和 计算 机 都 普遍 理解 的 母语 。 虽然 给 的 不 一 定 是 标准 答案 ， 
但 不 得 不 说 ，HTML 这 么 多 年 来 的 努力 ， 这 个 目标 或 者 说 定义 已 经 基本 成 为 了 现实 。 

为 实现 这 个 目标 ，HTML 提供 了 这 些 功能 : 

口 发 布 包含 文本 、 标 题 、 列 表 、 表 格 和 图 片 等 内 容 的 文档 。 

口 通过 超 链 接 获 取 线 上 信息 。 

口 为 终端 用 户 建立 可 同 远 程 服 务 器 交互 的 表单 ， 以 进行 搜索 信息 、 预 约 行程 和 订购 
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商品 等 操作 。 
OQ 直接 在 文档 中 包含 其 他 应 用 程序 的 资源 ) ， 如 电子 表格 和 音 视 频 等。 
从 这 些 功能 定义 上 你 可 能 看 出 来 了 ，HTML 本 身 并 不 是 资源 ， 而 是 万 维 网 中 资源 与 次 


源 之 间 的 胶水 。 它 承载 着 图 文 内 容 , 描述 资源 间 的 关系 ( 超 链 接 ), 粘 合 其 他 资源 甚至 程序 。 
除 此 之 外 ， 还 为 这 些 资 源 附加 上 特定 的 语义 (记得 前 面 举 到 的 人 物 档 案例 子 吗 )。 


同样 需要 理解 的 是 ，HTML 5 并 不 是 什么 稀奇 玩意 儿 ， 说 穿 了 它 也 是 HTML, Tu 


是 同样 的 事 儿 ， 只 不 过 ， 它 把 这 些 事 儿 干 的 更 加 漂亮 ! 不 过 在 具体 了 解 HTML 5 如 何 提供 
这 些 功能 之 前 ,我 们 得 先 来 聊 聊 HTML 最 核心 的 部 分 : 标签 和 属性 ， 后 文 的 内 容 也 将 围绕 
这 两 者 展开 。 


2.4: 


缩写 


2 HTML 的 核心 要 素 


HTML 的 核心 要 素 英 过 于 标签 (Tag) T- 
先 来 看 一 个 HTML 的 例子 片段 , 用 p 标签 来 定义 一 段 文字 ; 用 acronym 来 定义 首 字 母 
iW]; 用 em 来 强调 一 个 短语 ， 用 strong 来 标注 一 个 重要 的 词语 ， 用 蕊 和 二 来 定义 一 个 


列表 ; 用 code 来 展现 一 段 代 码 : 


<h2> 什 么 是 HTML? </h2> 
<p> 
<acronym title="Hyper Text Markup Language">HTML</acronym> 是 用 来 描述 网 页 的 一 种 
<strong> 语 言 </strong> 
例如 : 
<code> 
&lt;p&ggt; 程 序 写 得 好 ， 老 板 天 天 找 ， 程 序 写 得 好 ， 周 末 木 有 了 ， 程 序 写 的 好 ， 有 人 找 你 修 电 
Wi! &1t;/p&gt; 
</code> 
</p> 
<ul> 
«li»HTML 指 的 是 超 文本 标记 语言 </1i> 
«li»HTML 不 是 一 种 编程 语言 ， 而 是 一 种 <em> 标 记 语言 </em> (markup language)</1i> 
<1i> 标 记 语 言 是 一 套 <em> 标 记 标签 </em> (markup tag) </1i> 
<1i>HTML 使 用 <em> 标 记 标签 </em> 来 描述 网 页 </1i> 
«/ul» 


在 这 个 例子 中 可 以 看 到 ， 标 签 是 用 来 描述 文档 中 的 各 种 内 容 基 本 单元 ， 不 同 标签 表示 


着 不 同 的 含义 ， 标 签 之 间 的 嵌 套 表示 了 内 容 之 间 的 结构 。 


除了 标签 以 外 ， 前 面 的 例子 中 还 出 现 了 HTML 另 一 种 核心 要 素 : 属性 (attribute)。 任 


意 一 个 元 素 都 可 以 拥有 一 个 或 者 多 个 属性 。 属 性 提供 了 有 关 HTML 元 素 的 更 多 的 信息 ， 很 
多 时 候 也 会 提供 额外 的 功能 。 


对 于 所 有 HTML 元 素 都 可 以 指定 一 些 公有 (全 局 ) 属性， 如 下 所 示 。 

O id: 一 个 元 素 的 唯一 标识 符 〈identifier) 。 

口 tile: 元 素 的 标题 。 

口 lang: 为 元 素 和 包含 元 素 指 定语 言 。 

O class: 规定 元 素 的 类 名 。 

除了 适用 于 全 部 元 素 的 全 局 属性 ， 不 同 元 素 也 有 各 自 特 定 的 属性 ， 诸 如 : 
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口 img 和 script 元 素 的 src 属性 ， 规 定 显示 图 像 或 者 外 部 脚本 文件 的 URL。 
link 和 a 元 素 的 rel 属性， 定义 当前 文档 与 被 链接 文档 之 间 的 关系 。 
O input 元 素 的 type 属性 ， 规 定 input 元 素 的 类 型 ， 使 之 呈现 出 不 同 的 形态 ， 如 按钮 、 
输入 框 和 复 选 框 等 。 
口 所 有 可 见 元 素 的 onclick 和 onmouseover 等 属性 ， 定 义 了 相应 的 DOM 事件 ， 可 以 
在 属性 值 里 嵌入 JavaScript 代码 以 控制 页 面 。 
这 些 属 性 为 HTML 已 有 标签 提供 了 更 多 的 功能 和 控制 , 这 些 控制 包含 样式 上 和 行为 上 
的 。 现 在 我 们 为 这 段 HTML 代码 片段 加 上 前 面 列举 到 的 一 些 属性 ， 加 上 必要 的 html. head 
和 body 等 元 素 ， 将 其 修改 为 一 个 较为 完整 的 且 满 足 HTML 5 标准 的 页 面 : 

<!doctype html> 


<html lang="zh-CN"> 
<head> 
<title> 文 档 标题 ， 一 般 而 言 不 可 或 缺 </title> 
<!-- normalize.css 使 得 你 的 页 面 在 不 同 浏览 器 中 的 显示 保持 一 致 --> 
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/ 
2.0.1/normalize.css"> 
</head> 
<body bgcolor="#ddd"> 
<h2 id="h2-1"> 什 么 是 HTML? </h2> 
<p class="paragraph"> 
<acronym title="Hyper Text Markup Language">HTML</acronym> 是 用 来 描述 网 
页 的 一 种 <strong> 语 言 </strong>。 
例如 : 
<code> 
alt; pagt; FEF SHE, 老板 天 天 找 , 程序 写 得 好 ,周末 没有 了 ,程序 写 得 好 ， 随 时 外 地 跑 ， 
程序 写 得 好 ， 有 人 找 你 修 电脑 ! &lt; /pggt; 
</code> 
</p> 
<ul> 
«li class="current">HTML 指 的 是 超 文本 标记 语言 </1i> 
«li»HTML 不 是 一 种 编程 语言 ， 而 是 一 种 <em> 标 记 语言 </em> (markup language)«/li» 
<1i> 标 记 语 言 是 一 套 <em onmouseover-"this.style.backgroundColor-'yellow';"» 
标记 标签 </em> (markup tag)«/li» 
<1i>HTML 使 用 <em> 标 记 标签 </em> 来 描述 网 页 </1i> 
</ul> 
</body> 
</html> 


除了 标准 元 素 和 属性 外 , 很 多 其 他 HTML 标准 中 定义 的 内 容 我 们 也 能 在 这 个 例子 中 看 
到 ， 如 注释 和 DOCTYPE (doctype 使 用 了 标准 的 HTML 5 DOCTYPE， 后 文 将 详解 )。 这 个 
例子 中 有 的 做 法 在 正式 开发 中 是 不 被 提倡 的 ， 如 在 HTML 元 素 中 嵌入 JavaScript 代码 以 及 
SA bgcolor 属性 控制 页 面 样式 。 不 过 ， 你 只 需要 理解 ，HTML 的 核心 组 成 ， 便 是 元 素 和 

标签 (tag) 和 元 素 (element) 的 区 别 : 通常 ,我 们 在 口头 上 经 常 混用 这 两 个 概念 ， 比 
如 我 们 说 了 元 素 或 者 了 P 标签 ， 大 家 都 能 听 得 懂 意 思 ， 但 实际 上 这 两 者 并 不 相同 。 标 签 通常 
只 是 指标 签名 字 本 身 ， 比 如 “利用 header 标签 定义 文档 头 部 区 块 ”， 而 元 素 则 会 有 具体 的 
指 代 (一 个 元 素 中 可 包含 其 他 元 素 ) ， 比 如 “在 这 个 文档 中 id 为 123 的 p 元素”。 如 果 从 
DOM 角度 来 看 的 话 ， 元 素 则 更 多 了 一 层 含 义 ， 即 一 个 Element 实例 。 下面 这 段 代码 能 说 明 


D 


。21 。 


第 1 篇 HTML 5 移动 Web 开发 基础 


问题 : 
alert (document .body instanceof HTMLElement) 


// 弹出 true， 意 味 着 "body 是 一 个 HTML 元 素 " 
alert (document .body.tagName) 


// 弹出 BODY， 意味 着 "body 元 素 的 标签 名 是 BODY" 
22 HTML 的 语义 来 源 


HTML 的 语 4 义 通常 来 源 于 元 素 和 属性 这 两 个 基本 部 分 ， 除 此 之 外 文档 结构 本 身 也 能 表 
一 定 的 语义 


1. TRAM RÆ) 


通常 元 素 名 字 本 身 就 包含 了 丰富 的 语义 信息 ，h (heading) 表示 标题 ，p (paragraph) 
是 文章 段落 等 。 来 看 看 最 常见 的 Wl (Unordered lists), ol (Ordered lists). £l li (ist items) 
标签 : 
«ul» 
<1i> 这 里 是 无 序列 表 </1i> 
<1i> 条 上 日 是 没有 顺序 的 </1i> 
<1i> 理 论 上 对 于 UA 来 讲 ， 这 些 条 目 在 逻辑 上 是 可 以 被 打 乱 的 </1i> 
</ul> 
xol 
<1i> 有 序列 表 拥 有 顺序 </1i> 
<1i> 用 以 表示 步骤 、 排 名 等 内 容 </1i> 
<1i> 在 逻辑 上 这 些 列表 是 不 能 被 打 乱 的 </1i> 


«/ol» 


再 比如 不 怎么 常见 的 cite, blockquote 和 q 标签 〈 请 注意 注释 内 容 而 非 文字 内 容 ): 


Xp lang-"zh"» 

<!-- q 用 来 定义 短 引 用 ，cite 属性 用 来 定义 引用 的 引文 --> 

<q cite="http://knowledge.is.power"> 知 识 就 是 力量 </q>， 和 爸爸 曾经 对 我 这 样 说 ,我 

为 此 深信 不 疑 。 

<!-- cite 除了 作为 属性 外 , 同时 也 是 一 个 标签 , 用 来 引用 参考 文献 ， 比 如 书籍 或 杂志 标题 --> 

后 来 ， 我 又 阅读 了 韩寒 的 <cite>《 通 稿 2003》</cite>， 

里 面 写 到 : 

<!-- blockquote 用 来 定义 长 引用 --> 

<blockquote> 
中 国人 首先 就 没有 彻底 弄 明白， 学 习 和 上 学 ， 教 育 和 教材 完全 是 两 个 概念 。 学 习 未 必要 在 学 校 
里 学 ， 而 在 学 校 里 往往 不 是 在 学 习 。 

</blockquote> 

于 是 ， 我 明白 了 知识 和 书本 知识 是 两 码 事 。 


</p> 

标签 的 语义 丰富 以 至 于 大 部 分 浏览 器 都 为 这 些 具体 的 标签 加 上 了 默认 样式 〈 或 者 标准 
文档 建议 UA 实现 的 样式 )。 

在 图 2.1 列表 中 ， 浏 览 器 自动 为 列表 加 上 了 左 缩 进 ， 并 为 无 序列 表 加 上 了 小 黑 点 ， 为 
有 序列 表 生 成 了 阿拉 伯 数 字 编 号 。 而 在 图 2.2 引用 中 , q 标签 dicetis pide. ^5, cite 
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则 被 改 为 了 斜体 ，blockquote 则 在 前 后 左右 都 加 上 了 边 距 。 浏 览 器 甚至 会 根据 你 使 用 的 系 
统 语言 或 者 具体 lang 属性 的 变化 ， 自 动 生成 和 语言 相 匹 配 的 符号 ， 比 如 在 设置 lang="zh" 

时 浏览 器 会 为 q 元 素 生 成 中 文 引号 ， 而 lang="en" 则 会 生成 英文 引号 。 

。 这 里 无 序列 表 

。 条 目 全 没有 版 序 的 

。 理论 上 对 于 UA 来 讲 ， 这 些 条 目 可 以 被 打 乱 显示 

1. 有 序列 表 拥 有 顺序 

2. 用 以 表示 步骤 、 排 名 等 内 容 

3. 在 逻辑 上 这 些 列表 是 不 能 被 打 乱 的 

图 2.1 列表 


“知识 就 是 力量 ” ， eur Ui DM 我 为 此 深信 不 疑 。 后 来 ， 我 又 阅读 了 
韩寒 的 《和 遂 蒋 2003》， 里 面 写 到 


中 国人 首先 就 没有 彻底 弄 明白 ， 学 习 和 上 学 ， 教 育 和 教材 完全 是 两 个 
概念 。 学 习 未 必要 在 学 校 里 学 ， 而 在 学 校 里 往往 不 是 在 学 习 。 


于 是 ， 我 明白 了 知识 和 书本 知识 是 两 码 事 。 
图 2.2 引用 


之 所 以 会 自动 生成 这 些 个 样式 , 都 源 于 HTML 本 身 赋予 了 这 些 标签 的 具体 语义 ， 而 用 
户 代理 会 根据 这 些 语义 ， 选 择 合适 的 呈现 方式 。 


2. 元 素 属性 


除了 标签 本 身 提 供 的 丰富 语义 ， 配 合适 当 的 属性 能 够 更 精确 对 元 素 和 元 素 内 容 进行 描 
述 。 比 如 前 文中 提 到 的 cite 属性， 我 们 常用 的 title 属性 ， 也 包括 aria-* 属 性 。 如 下 例 中 的 
class 属性 : 

<!-- 无 论 是 肉眼 还 是 机 器 都 能 很 容易 的 判断 出 这 段 代 码 描述 的 是 一 个 导航 栏 --> 


<div class-"navbar"» 
<div class-"navbar-inner"» 
«!—a 元 素 虽 然 只 表示 链接 ， 但 加 上 class-"brand" 后 ， 这 个 链接 被 赋予 了 品牌 和 商标 
(brand) 的 语义 --> 
<a class-"brand" href="/home"> 某 浪 微 博 </a> 
<ul class="nav"> 
«1— 值 为 active 的 class 使 机 器 可 以 判断 当前 文档 所 在 路 径 和 大 致 标题 (即便 文档 中 没有 包 
含 h 元 素 ) --> 
<li class="active"><a href="#"> 首 页 </a></1i> 
<li><a href="#"> 热 门 微 博 </a></1i> 
<li><a href="#"> 冷 门 微 博 </a></1i> 
</ul> 
</div> 
</div> 


class 属性 的 内 容 在 实际 应 用 中 其 实 可 视 为 一 种 扩展 语义 ，W3C 的 标准 文档 中 也 鼓励 
在 使 用 class 时 将 其 设 为 描述 元 素 内 容 特 性 的 值 。 

除了 独立 的 元 素 和 其 属性 外 ， 文 档 整 体 结构 以 及 文档 的 内 容 也 其 实 包 含 潜在 的 语义 信 
Bo EWEEK section 表示 了 不 同 级 别 的 区 块 ， 里 面 的 heading 会 随 着 嵌 套 级 别 的 变化 而 
改变 自己 的 标题 级 别 ， 再 比如 位 于 文档 前 部 的 内 容 通常 表示 更 重要 的 内 容 。 
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23 HTML 5 的 元 素 和 属性 


HTML 5 新 增 了 许多 元 素 ， 这 些 元 素 在 描述 文档 语义 方面 和 增强 HTML 功能 方面 都 是 
极其 有 用 的 。 本 节 将 把 HTML 语义 以 及 HTML 5 元 素 对 语义 部 分 的 增强 结合 起 来 讲解 。 


2.3.1 全 局 属性 


前 文 已 经 说 过 ， 属 性 能 表达 相当 丰富 的 语义 ， 而 且 属性 也 会 额外 提供 很 多 实用 的 功 
É. HTML 5 支持 非常 多 的 全 局 属性 , 这 些 属性 可 以 被 应 用 到 所 有 HTML 元 素 上 , 如 表 2-1 
所 示 。 


表 2-1 全 局 属性 (* 号 为 HTML 5 新 增 ) 


ey . accesskey, class, contenteditable* , contextmenu» , dir , draggable» , dropzone* , hidden», 

常用 属性 id, lang, spellcheck*, style, tabindex, title 和 translate 
onabort, onblur, oncancel, oncanplay , oncanplaythrough., onchange, onclick, onclose, 
oncontextmenu 、 oncuechange . ondblclick, ondrag 、 ondragend ondragenter 、 
ondragleave, ondragover, ondragstart , ondrop , ondurationchange., onemptied , onended , 

事件 处 理 属性 onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, 

DE onloadeddata , onloadedmetadata , onloadstart, onmousedown , onmousemove , 

onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay、 onplaying, 
onprogress, onratechange. onreset、 onscroll, onseeked, onseeking. onselect, onshow、 
onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange fil onwaiting 

自 定义 数据 属性 data-api 和 data-toggle 等 ， 由 用 户 自行 定义 

(data-) * 

role 和 aria- 属 性 ”| aria-labelledby, aria-level, aria-describedby 和 aria-orientation 等 

HTML 扩展 属性 | 微 数据 (microdata) 和 微 格式 (microfomats) 


QE: 虽然 事件 处 理 属性 可 以 被 设置 到 所 有 HTML 元 素 上 ， 但 它们 不 一 定 在 所 有 元 素 
上 起 作用 。 例 如 ， 隐 藏 元 素 如 head 就 无 法 响应 这 些 事件 ， 而 onvolumechange 这 
样 的 事件 就 只 有 媒体 元 素 ( audio 和 video) 才 会 触发 。 关 于 aria- 的 详细 内 容 请 参 
见 附 录 。 


1. 这 属性 


可 能 你 会 觉得 把 id 这 个 已 经 被 用 烂 的 属性 拿 出 来 讲 显得 有 点 不 合 时 宜 , 但 鉴于 在 实际 
生成 当中 这 个 属性 常常 被 误 用 ， 还 是 有 必要 拿 出 来 单独 讲 讲 。 

id (unique identifier)， 顾 名 思 义 ， 表 示 元 素 的 唯一 编号 ， 通 常 我 们 要 确保 其 在 文档 内 
是 唯一 的 ， 它 的 作用 是 引用 元 素 (页 面 定位 、JS 中 引用 和 CSS 中 引用 ), 而 且 最 重要 的 是 ， 
这 个 属性 默认 是 不 包含 任何 语义 信息 的 。 

一 种 比较 好 的 做 法 是 在 生成 HTML 的 时 候 根据 一 定 规则 对 id 属性 进行 自动 编号 ， 
Facebook 在 BigPipe 技术 中 便 采用 了 这 一 做 法 ， 这 样 可 以 使 得 组 件 引 用 不 会 产生 冲突 。 
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2. class 属性 


class 属性 可 能 是 HIML 中 最 常用 的 属性 了 。 作 为 选择 器 ， 我 们 在 JavaScript 和 CSS 
代码 中 都 经 常 引用 它 。 而 且 它 的 使 用 几乎 没有 什么 限制 ， 并 且 是 有 语义 指导 意义 的 。 据 论 
传 ，HTML 5 中 的 众多 新 标签 其 实 就 是 通过 统计 大 量 的 已 有 HTML 文档 中 的 class 名 ， 然 
后 选择 最 常用 的 class。 

题 外 话 : Æ CSS 中 class 属性 的 权 值 是 小 于 id 的 ， 意味 着 引用 同一 元 素 的 id 选择 器 和 
class 选择 器 如 果 和 包含 互 斥 的 声明 时 ( 例如 指定 字体 为 红色 和 蓝 色 ) ，id 选择 器 会 胜出 。 但 
是 关于 这 一 条 我 们 熟知 的 CSS 基本 原则 其 实 有 一 个 奇怪 而 有 趣 的 例外 , 当 为 同一 个 元 素 指 
定 256 个 不 同 的 class， 并 且 这 256 个 class 都 级 联 ， 那 么 其 声明 将 “打败 ”一 条 id 选择 器 
的 声明 : 

did ( 

color: red; 

SNO SUP QUERCUS QUSE EU TOTO ERREUR class...c252. 

c253.c254.c255 ( 

color: blue; 

} 

对 于 这 段 HTML 代码 : 


<div id="id" class-"c000 c001 c002 c003 c004 c005 c006 c007 c008 .… 中 间 再 度 
省 略 数 百 个 class...c252 c253 c254 c255" > 猜 猜 我 是 什么 颜色 ? </div> 


最 终 的 显示 效果 应 该 是 蓝 色 。 为 什么 呢 ? 其 实 很 简单 ， 如 果 你 了 解 计 算 机 存储 数据 的 
原理 ， 从 class 个 数 上 已 经 能 看 出 个 端倪 了 。 原 因 就 在 于 class 属性 的 权 值 在 浏览 器 中 使 用 
8 位 字符 串 (8bit strings) 存储 ， 它 所 容纳 的 最 大 值 就 是 255， 因 此 累积 256 个 class 会 导致 
声明 的 权 值 越界 到 id 选择 器 的 权 值 域 ， 最 终 导 致 其 优先 级 (Specificity) 高 于 id 选择 器 。 
不 过 某 些 浏览 器 (如 Opera) 中 ，class 是 由 16 位 字符 串 存 储 ， 因 此 需要 65536 个 连续 的 
class 才能 “打败 ”id 选择 器 。 

3. title 属性 


title 在 英文 中 的 含义 是 名 称 、 标 题 ， 在 HTML 当然 也 不 例外 ， 它 通常 用 于 指定 元 素 可 
供用 户 咨询 的 信息 (advisory information)， 在 浏览 器 中 一 般 表 现 
为 鼠标 悬 停 时 弹出 指定 的 提示 文字 ， 如 图 2.3 所 示 。 

在 不 同 的 信息 ，title 可 供 咨询 的 内 容 页 不 同 。 例 如 ， 链 接 上 REE 
的 title 一 般 用 于 描述 目标 信息 , 表示 图 书 音乐 的 信息 可 能 放置 版 SACER 
权 信息 ， 引 用 信息 就 用 来 指明 其 来 源 ， 当 然 也 可 以 为 你 的 应 用 放 一 人 
署 帮助 信息 。 这 些 行为 不 仅 在 Web 上 适用 ,桌面 程序 也 是 适用 的 。 


4. lang 和 dir 属性 


图 2.3 title 的 功效 


lang 一 般 会 在 HIML 元 素 上 设置 或 者 无 需 设置 ， 因 为 通常 同一 份 HIML 文档 不 会 提 
供给 不 同 语言 国家 的 用 户 。 当 然 ， 如 果 你 的 站 点 需要 支持 国际 化 ，lang 属性 就 很 用 了 一 
一 比如 你 可 以 在 后 端 根据 用 户 来 源 动态 提供 不 同 lang 属性 设置 。 
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dir 也 是 和 国际 化 有 关 的 属性 , 用 于 设置 文字 显示 方向 , 它 的 值 可 以 是 rtl (right to left) 
或 者 ltr (left to right)。 在 某 些 国家 (如 阿拉 伯 国 家 〉 文字 的 书写 方式 是 从 右 往 左 ， 此 时 就 
可 以 把 dir HEEN rtl. 

题 外 话 : Æ HTML 4 之 前 还 有 一 个 dir 标签， 用 于 定义 目录 列表 ， 不 过 已 经 不 赞成 再 
使 用 。 


2.82 HTML 5 与 它 的 全 局 属性 


HTML 5 额外 提供 的 全 局 属性 都 是 异常 强大 的 存在 ,在 表 2-1 中 已 经 用 * 号 标注 了 出 来 ， 
现在 让 我 们 来 细 细 品尝 一 下 这 些 糖果 吧 。 


1. contentEditable 属性 


EE IE 5 的 时 候 ， 伟 大 的 微软 已 经 发 明了 编辑 模式 。 在 document 对 象 上 有 一 个 
designMode 属性 ， 能 用 来 设置 或 获取 表明 文档 是 否 可 被 编辑 的 值 ， 可 取 值 为 on 或 者 off。 
相 较 于 将 整个 文档 设置 为 可 编辑 状态 ，contentEditable 属性 显然 更 加 有 用 ，contentEditable 
可 以 设置 到 任意 元 素 上 ， 该 属性 是 一 个 布尔 值 ， 指 定 其 为 true 的 元 素 将 进入 编辑 模式 。 在 
IE 将 这 个 特性 发 扬 光 大 后 ， 其 他 浏览 器 也 依 葫芦 画 球 实现 了 这 一 属性 ， 到 后 来 这 一 属性 也 
"AT HTML 5 的 标准 属性 当中 ， 如 图 2.4 所 示 。 


Google designmode contenteditable 


偷偷 摸 找 在 这 里 打上 一 行 字 
网 页 图 片 地 图 购物 


找到 约 501 b,o00 条 结果 (用 时 0.10 秒 ， 


图 2.4 编辑 模式 


编辑 模式 打开 后 (指定 document.designMode=“om), 页 面 的 任意 位 置 都 可 以 插入 光标 ， 
并 进行 编辑 ， 使 用 contentEditable=“true" 则 只 对 具体 元 素 和 其 包含 的 元 素 起 作用 。 

可 编辑 的 模式 十 分 有 用 ， 网 页 上 的 富 文本 编辑 器 几乎 都 基于 此 原理 实现 。 完 整 的 富 文 
本 编辑 器 还 要 配合 选区 等 技术 实现 ， 下 面 我 们 来 试 着 实现 一 个 最 简单 的 编辑 器 ， 它 可 以 实 
现 粗 体 、 和 斜体 和 下 划 线 功能 。 

首先 ， 搭 起 HTML 骨架 : 


«html» 
<head> 
<title> 简 单 编辑 器 </title> 
<script src-"../../jquery.js"»«/script» 
</head> 
<body> 
<h2> 下 面 是 编辑 器 </h2><hr> 
<div id="editor"> 
<button id="bold"><b> 加 粗 </b></button> 
«button id="italic"><i> 斜 体 </i></button> 
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<button id="underline"><u> 下 划 线 </u></button> 
<div contenteditable="true"> 
这 里 面 <b> 已 经 </b> 有 <i> 一 些 </i><u> 富 文本 </u> 了 
«/div» 
«/div» 
</body> 
</html> 


此 时 ， 我 们 已 经 可 以 编辑 了 ， 如 图 2.5 所 示 。 

QFE: 本 书 例子 中 都 默认 使 用 jQuery 类 库 ， 如 果 你 不 熟悉 jQuery 的 使 用 ， 可 以 购买 
jQuery 相关 书籍 。 

一 行 JS 代码 未 写 , 已经 可 以 编辑 文字 了 。 接 下 来 我 们 要 加 上 加 粗 等 功能 了 ， 要 实现 这 
些 功能 ， 我 们 得 求助 于 document.execCommand 函数 ， 该 函数 可 以 对 文档 执行 预定 义 的 命 
令 ， 包 括 设置 文档 背景 色 、 转 换 选 择 的 文本 为 粗 体 斜体 、 缩 进 文本 和 生成 链接 等 功能 。 可 
以 传递 三 个 参数 给 它 : 要 执行 的 命令 的 名 称 、 是 否 为 当前 命令 提供 用 户 界面 和 与 命令 相关 
的 值 。 例 如 : 


document.execCommand ('backcolor',false, 'red') 


这 人 句 话 将 会 把 可 编辑 域 中 已 经 选择 的 文本 的 背景 设置 为 红色 ， 如 图 2.6 所 示 。 


下 面 是 编辑 器 
这 里 击 忆 经 有 EEXET 
TE T OA | 


图 2.5 编辑 器 雏形 图 2.6 添加 背景 


我 想 你 的 心里 应 该 有 底 了 ， 只 要 为 那 三 个 按钮 绑 定 上 click 事件 ， 写 好 代码 ， 完 事 儿 ! 


// WEB, TER: 
// 基本 的 面向 对 象 素养 还 是 得 有 滴 
function Editor (selector) { 
// 把 整个 editor 对 象 缓存 下 来 ， jQuery 对 象 的 前 面 加 上 $ 符 号 是 个 好 习惯 
this.$editor = $(selector) 
// 私有 的 函数 我 们 就 为 它 加 上 下 划 线 一 这 是 一 个 在 JavaScript 编程 中 普遍 被 遵守 的 约定 
this.bindEvents () 
) 
Editor.prototype.bindEvents = function() ( 
// 真实 的 编辑 器 可 能 有 数 十 个 按钮 ， 使 用 事件 代理 可 以 大 大 提高 代码 的 执行 效率 
this.$editor.on('click', 'button', function(e) { 
switch(e.currentTarget.id) { 
case 'bold': 
// 后 两 个 参数 在 大 多 数 情况 下 可 以 省 略 ， 下 同 
document .execCommand ( 'bold') 
break 
case 'italic': 
document.execCommand('italic') 
break 
case 'underline': 
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document.execCommand ('underline') 
break 
} 
} 
} 


然后 在 HTML 代码 里 引用 我 们 写 好 的 editorjs， 并 初始 化 一 个 编辑 器 : 


«script src="../../jquery.js"></script> 
<script src="editor.js"></script> 
</head> 


x: cenis 
new Editor ('#editor') 
</script> 

</body> 

</html> 

现在 我 们 的 编辑 器 已 经 可 以 实现 简单 的 富 文本 编辑 了 ， 如 图 2.7 所 示 。 

真实 环境 里 的 编辑 器 远 没有 这 么 简单 ， 除 了 要 实现 - = 
documentexecCommand 提供 的 功能 ， 还 要 处 理 可 怕 的 兼容 E | 开间 
性 一 一 备 大 浏览 器 虽然 都 支持 document.execCommand, 但 是 这 里 面 已 经 有 一 些 富 文 本 了 
生成 的 HTML 代码 可 不 一 致 .例如 ,执行 bold 命令 时 ,Chrome FENA, Pid Em 
和 Safari 会 生成 <b> 标 签 ， 而 IE 则 会 生成 <strong> 标 签 ， 还 
有 一 些 特别 的 功能 需要 配合 其 他 编辑 器 api 和 选区 操作 等 才 
能 实现 。 完 整 健壮 的 编辑 器 的 实现 需要 耗费 大 量 的 精力 ， 不 过 市 面 上 已 经 有 非常 多 的 编辑 
器 可 供 我 们 选择 ， 国 外 老牌 的 有 ckeditor， 国 内 也 有 Kissy editor 等 供 选择 ， 而 且 它 们 绝 大 
多 数 都 是 免费 开源 的 。 

另外 还 有 非常 重要 的 一 点 需要 说 明 ， 在 移动 设备 上 contenteditable 显得 并 不 那么 灵光 : 
iOS 到 5.0 之 后 ，Android 到 3.0 之 后 的 版 本 才 正 式 支 持 contenteditable 属性 。 鉴 于 移动 设 
备 使 用 场景 并 不 适合 复杂 操作 ， 因 此 不 建议 在 其 上 使 用 contenteditable 或 者 富 文 本 。 


图 2.7 选区 变 为 斜体 


2. contextmenu 属性 


Web 应 用 化 是 HTML 5 很 重要 的 目标 之 一 ， 为 支持 更 贴近 桌面 程序 的 用 户 体验 ， 原 生 
支持 右键 菜单 和 拖 电 等 功能 就 变 得 很 有 必要 了 。 
contextmenu 属性 能 够 让 所 有 元 素 都 拥有 自己 的 上 下 文 ( 即 右键 菜单， 既然 是 菜单 ， 
与 此 配套 的 自然 少不了 菜单 (menu) 元 素 。menu 元 素 可 以 定义 一 个 未 排序 的 列表 ， 包 含 
菜单 或 者 命令 选项 ， 可 以 指定 label 属性 以 定义 菜单 的 标签 。type 则 表示 菜单 的 类 型 ， 目 前 
有 context、toolbar 和 list 三 种 。 
menu 元 素 可 以 嵌 套 ， 中 间 也 可 以 包含 开元 素 或 者 menuitem 元 素 : 
«menu type-"toolbar"» 
«li» 
«menu label-"File"» 
Xbutton type-"button" onclick-"new() "> 新 建 . . .</button> 
<button type="button" onclick="save () "> 保存 . . -</button> 
«/menu» 
«/1li» 
<li> 
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<menu label="Edit"> 
<button type="button" onclick="cut () "> 前 切 .. .</button> 
<button type="button" onclick="copy () "> 复制 . . .</button> 
<button type="button" onclick-"paste () "> 粘贴 . . .</button> 
</menu> 
«/li» 
«/menu» 


我 们 可 以 编写 一 个 简单 的 右键 分 享 例子 ， 右 键 单 击 div 区 域 弹 出 分 享 选项 ， 并 可 以 在 
子 菜单 中 选择 分 享 到 哪里 : 


<menu type="context" id="mymenu"> 
«menuitem label=" IXH" onclick="window.location.reload();"></menuitem> 
«menu label=" 分 享 本 页 面 到 ..."> 
<menuitem label=" 新 浪 微 博 " 
icon="http://www.sinaimg.cn/blog/developer/wiki/LOGO 24x24.png" 
onclick="window.open ('http://service.weibo.com/share/share.php?title=' + 
document.title + '&url-' + window.location.href);"></menuitem> 
«menuitem label=" 腾讯 微 博 " icon="http://v.t.qq.com/share/images/s/ 
weiboiconl6.png" 
onclick-"window.open('http://share.v.t.qq.com/index.php?c-share&a-index 
&title-' + 
document.title + '&url-' + window.location.href);"»«/menuitem» 
«/menu» 
«/menu» 


虽然 contextmenu 很 有 用 ， 但 contextmenu 支持 并 不 广泛 ， 目 前 只 有 Firefox 部 分 支持 
它 ， 上 例 在 Firefox 中 打开 的 效果 如 图 2.8 所 示 。 
eoo 


JE hey pusersifi.ontexmenummi (al s 


file:///Users/filod/f/book/ch2/contextmenu.! 


右键 点 击 这 里 ， 可 以 分 享 页 面 到 两 大 微 博 
刷新 页 面 
人 新 浪 微 博 
前 进 
EFRA 


图 2.8 contextmenu 


鉴于 浏览 器 对 contextmenu 的 支持 程度 不 高 , 建议 读者 在 需要 contextmenu 的 场景 下 依 
然 使 用 模拟 的 右键 菜单 实现 ， 几 乎 各 大 UI 组 件 库 都 包含 现成 代码 ，YUI、Closure Library 
和 Kissy 里 都 包含 相应 的 menu 解决 方案 ，jQuery UI 库 也 有 第 三 方 插件 


Chttps://github.com/medialize/jQuery-contextMenu) 可 以 选择 。 


3. draggable 和 dropzone 

拖 忠 无 疑 是 鼠标 交互 中 最 人 性 化 的 发 明了 , 很 久 很 久之 前 人 们 已 经 开始 在 Web 上 使 用 
mouseover 等 事件 模拟 拖 忠 行为 ， 但 毕 竞 不 是 天 生 而 是 人 造 的 功能 ， 体 验 上 打 了 很 多 折扣 ， 
例如 拖 忠 可 能 不 够 流畅 ， 而 且 无 法 与 浏览 器 之 外 的 文件 进行 交互 。 

HTML 5 中 新 增 的 draggable 属性 使 得 所 有 元 素 都 有 能 力 被 拖 忠 , 而 dropzone 则 给 元 素 
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提供 了 放置 被 拖 电 元 素 的 能 力 : 
<div draggable-"true"» 


我 可 以 被 拖 动 


«/div» 
<div dropzone-"true"» 


可 以 拖 东西 放 到 我 身上 


«/div» 


运行 后 的 效果 如 图 2.9 所 示 。 


图 2.9 简单 的 拖 放 效果 


我 们 将 在 后 续 的 章节 中 详细 介绍 拖 放 接口 的 全 部 内 容 ， 且 实现 一 个 拖 放 文件 并 上 传 的 
功能 。 


4. hidden 属性 


hidden 属性 和 CSS 中 display:none 的 作用 一 模 一 样 : 让 元 素 不 显示 。 比 如 在 游戏 中 ， 
游戏 界面 和 登录 界面 是 不 能 同时 出 现 的 ， 我 们 可 以 使 用 类 似 下 面 的 代码 来 处 理 这 一 需求 : 


Xhl»The Example Game</h1> 
Xsection id-"login"» 
Xh2»Login«c/h2» 
«form» 


<!-- 当 用 户 填 完 资料 后 调用 login () 方 法 --> </form> 
«script» 
function login() ( 
document.getElementById('login').hidden - true; 
document.getElementById('game').hidden - false; 
) 
</script> 
</section> 
<section id="game" hidden> 


</section> 
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乍 一 看 除了 少 写 一 些 代码 ， 似 乎 并 没有 带 来 太 大 的 方便 。 但 实际 上 一 个 新 全 局 属性 的 
出 现 远 不 是 一 个 快捷 方式 那么 简单 。 

首先 设 定 了 hidden 的 元 素 在 语义 上 和 设置 display: none 的 元 素 是 完全 不 同 的 。 后 者 仅 
仅 是 针对 表现 层 的 显示 状况 为 不 泻 染 ,而 前 者 则 表示 该 元 素 和 当前 页 面 状 态 没 有 直接 关联 ， 
或 者 日 后 会 被 页 面 的 其 他 部 分 所 使 用 。 这 意味 着 hidden 不 能 被 使 用 在 当前 状态 相关 的 元 素 
上 。 最 容易 想到 的 例子 便 是 tab 组 件 了 ， 对 于 在 同一 个 对 话 框 中 被 隐藏 的 tab， 是 不 能 使 用 
hidden 的 ， 因 为 对 于 隐藏 的 tab 而 言 ， 其 实 与 当前 页 面 状态 是 有 关联 的 ， 充 其 量 算是 内 容 
溢出 视图 (overflow presentation) 了 一 一 同样 的 页 面 如 果 在 移动 设备 上 可 能 就 会 显示 全 部 
内 容 并 且 以 分 组 方式 展示 而 不 是 tab 对 话 框 的 形式 。 

同 理 我 们 可 以 得 出 , 一 个 链接 链 到 hidden 的 元 素 也 是 不 合理 的 一 一 如 果 内 容 与 页 面 无 
关联 ， 没 有 任何 理由 需要 链接 到 它 。 

hidden 属性 不 被 所 有 浏览 器 支持 , 但 是 不 难 想 出 使 用 CSS 属性 选择 器 来 兼容 大 部 分 浏 
览 器 的 方法 : 

*[hidden] ( 

display: none; 


5. spellcheck 属性 

spellcheck 是 个 很 特别 的 属性 ， 浏 览 器 可 以 用 来 检测 可 编辑 区 域 (表单 或 者 
contenteditable 元 素 ) 的 拼写 语法 错误 ,同样 ， 它 是 一 个 布尔 值 。 这 个 属性 在 桌面 浏览 器 上 
支持 比较 好 ， 但 是 在 移动 设备 的 浏览 器 上 支持 不 太 好 。 最 终 的 效果 大 致 如 图 2.10 所 示 。 


图 2.10 拼写 检查 


6. data-* 属 性 


与 HTML 具体 元 素 相关 联 的 数据 究竟 存储 在 何 处 ， 在 过 去 一 直 是 困扰 程序 员 们 的 难 
题 。 曾 经 有 存储 在 class 或 者 rel 这 样 的 属性 上 的 做 法 ， 可 是 class 和 rel 属性 与 样式 表 以 及 
语义 都 相关 , 在 它们 上 存储 数据 显然 不 合理 ,尤其 是 在 class 上 存储 的 数据 ， 提 取 和 处 理 的 
时 候 也 会 十 分 麻烦 。 

于 是 大 家 开始 自 定 义 属性 来 存储 数据 ， 而 自 定 义 属性 的 问题 在 于 你 无 法 预知 你 自己 定 
义 的 属性 在 未 来 会 不 会 真 的 会 变 成 了 一 个 HIML 的 标准 属性 。 而 且 自 定义 的 属性 也 不 符合 
HTML 本 身 的 规范 。 

还 好 HIML 5 提供 了 data-* 属 性 能 让 你 能 使 用 自 定义 属性 的 方式 来 存储 数据 。data-* 
在 使 用 时 非常 的 自由 ， 只 需要 在 属性 前 加 上 data- 前 缀 即 可 ， 值 可 以 是 任意 字符 串 ， 先 来 看 

<!-- 我 们 在 制作 游戏 时 可 能 会 初始 化 一 个 太空 船 ， 我 们 需要 存储 它 的 编号 (Gia) 、 武 器 、 防 护 单 


和 坐标 --> 
<div class-"spaceship" data-ship-id-"92432" 


| = 
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data-weapons-"laser 2" data-shields-"50$" 
data-x-"30" data-y-"10" data-z-"90"» 
<button class-"fire"» 
开火 
X/button» 
</div> 


使 用 data- 属 性 的 一 大 好 处 是 所 有 浏览 器 都 支持 ， 你 可 以 在 所 有 浏览 器 中 使 用 
getAttribute 方法 来 获取 data- 属 性 的 值 ，setAttribute 方法 来 设置 值 : 


<article id-"a-1" data-created-time-"2012-12-21"» 
data- 属 性 很 性 感 ， 本 例 在 所 有 浏览 器 下 都 可 以 运行 。 

</article> 

<script type-"text/javascript"» 
var el = document.getElementById('a-1') 
console.log(el.getAttribute('data-created-time')) // "2012-12-21" 
el.setAttribute('data-created-time', '2013-1-4') 

«/script» 


显然 HTML 5 不 仅仅 是 把 data- 前 级 写 入 了 规范 这 么 简单 ,在 目前 浏览 器 中 , 还 可 以 在 
JavaScript 中 通过 元 素 的 dataset 属性 访问 data- 属 性 的 值 。dataset 是 一 个 DOMStringMap 对 
象 ， 使 用 它 相 比 使 用 getAttribute 更 方便 ， 不 用 加 上 data- 前 绥 : 


<div id-'tree' data-leaves-'47' data-plant-height-'2.4m'» 
我 是 一 棵 树 

«/div» 

<script type-"text/javascript"» 
var tree = document.getElementById('tree') 
console.log(tree.dataset.leaves) // '47' 
// 由 连 字符 分 割 的 值 会 被 自动 转换 为 驼峰 形式 访问 
console.log(tree.dataset.plantHeight) // '2.4m' 


tree.dataset.plantHeight = '3m' 

tree.dataset.leaves-- // '46' 

tree.dataset.age - 100 
</script> 


改变 了 dataset 的 值 会 即时 地 反应 在 DOM 结构 中 : 


v «body» 
«div id-"tree" data-teavesffagr]uata-ptant-neignt="an" idata-age-"100" 


» «script type-"text/javascript »..-/script» 
如 果 需 要 删 掉 一 个 值 ， 将 其 置 为 null， 或 者 使 用 delete: 


tree.dataset.leaves = null 
delete tree.dataset.age 


如 果 你 使 用 jQuery， 你 会 发 现 jQuery 的 data 方法 也 可 以 访问 元 素 的 data- 属 性 : 


var Stree = $('4tree') 
S$tree.data('plant-height') // 3m 


jQuery 的 data 方法 还 会 自动 帮 你 转换 数据 类 型 : 
console.log(typeof $tree.data('leaves')) // number 
它 甚至 可 以 帮 你 自动 反 序列 化 JSON 数据 : 


«div id-"q-1" data-object="{&quot;typeg&quot; :&quot;questiongquot;, &quot; 
author&quot;:&quot;filod&quot;]" > 
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为 什么 jQuery 这 么 好 用 ? 
</div> 
<script type="text/javascript"> 

console.log($('#q-1') .data('object') .author) // filod 
</script> 


这 样 你 可 以 在 后 端 生成 模板 时 将 序列 化 成 JSON 直接 存 入 HTML 中 。 
除了 存储 关联 数据 ， 很 多 JavaScript 库 都 使 用 data- 属 性 来 进行 组 件 或 者 API 定义 ， 一 
个 jQueryMobile 的 例子 : 


<div data-role="page" id="page" data-theme="b"> 
<div data-role="header"> 
<h1> 标 题 </h1> 
</div> 
<div data-role="content"> 
内 容 都 在 这 儿 
</div> 
<div data-role="footer"> 
<h4> 底 部 </h4> 
</div> 
</div> 


jQueryMobile 使 用 data- 属 性 来 定义 页 面 组 件 ， 并 根据 属性 的 值 来 初始 化 它们 。 再 比如 
在 Bootstrap 中 也 使 用 了 同样 类 似 的 data-api 风格 : 


<!-- KA Bootstrap 官方 的 例子 ， 这 个 例子 定义 了 一 个 导航 组 件 ， 
data-toogle 代表 了 组 件 的 状态 ，data-target 则 以 选择 器 字符 串 的 方式 定义 了 组 件 应 用 
目标 --> 
<div class="navbar"> 
<div class="navbar-inner"> 
<div class="container"> 
<a class="btn btn-navbar" data-toggle="collapse" data-target= 
".nav-collapse"^ 
<span class-"icon-bar"»«/span» 
<span class-"icon-bar"»«/span» 
<span class-"icon-bar"»«/span» 
«/a» 
<a class-"brand" href-"j£"»Project name</a> 
«div class-"nav-collapse collapse"» 


«/div» 
«/div» 
</div> 
</div> 


data- 属 性 在 许多 场景 下 都 可 以 使 用 ，W3C 在 定义 这 个 属性 时 ， 这 样 说 道 ; 


Custom data attributes are intended to store custom data private to the page or application, 


for which there are no more appropriate attributes or elements. 

在 你 需要 存储 页 面 /程序 私有 的 自 定义 数据 而 又 不 知道 使 用 什么 属性 或 者 元 素 时 , 就 用 
data 属性 吧 。 

即使 是 这 样 你 还 拿 不 准 究 竟 在 什么 时 候 使 用 的 话 ， 可 以 参考 下 面 列举 的 适用 情况 和 不 
适用 情况 。 

适用 情况 : 

O 存储 组 件 日 后 可 能 被 JavaScript 使 用 到 的 参数 元 素 的 高 度 和 透明 度 〉; 
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口 存储 与 模块 关联 的 数据 ; 
O 存储 分 析 数 据 〈 配 合 GA 或 者 其 他 数据 分 析 追 踪 工 具 ) ; 
O 存储 游戏 中 的 值 〈 生 命 值 、 魔 法 值 和 攻击 力 等 等 ) 。 


不 适用 情况 : 
D 己 经 有 更 适合 的 属性 。 说 明 信 息 最 好 存在 title 属性 里 ， 而 不 是 类 似 data-description 
的 属性 。 


O HENX data 属性 和 微 格式 数据 不 能 混用 ， 两 者 并 无 直接 关系 。 微 格式 通常 提供 给 
第 三 方 的 程序 〈 如 搜索 引擎 ) ， 而 自 定 义 data 属性 则 是 为 你 自己 的 程序 所 用 。 

O 不 要 利用 data 属性 作为 应 用 CSS 样式 的 标准 CI, 不 要 使 用 [data-xxx] {…} 这 样 的 
CSS 代码 ) 。 


AFE: 随 着 data 属性 被 广泛 使 用 ， 命 名 上 的 冲突 也 会 盒 演 愈 烈 。 如 果 你 老 是 使 用 毫 无 想 
象 力 的 命名 (比如 data-width 什么 的 ) ， 将 会 很 容易 与 其 他 的 插件 或 者 库 产生 冲 
A. 所 以 最 好 是 使 用 命名 空间 来 做 这 件 事 儿 , 比如 data-filod-width, data-baidu-size 
xS. 


2.8.8 内 容 模型 (content models) 


HTML 的 众多 元 素 很 多 时 候 我 们 并 不 知道 如 何 对 其 分 类 ， 很 多 时 候 你 可 能 听 到 的 都 是 
按 元 素 的 默认 样式 来 分 类 : 块 级 (Block) 元 素 和 内 联 (inline) 元 素 。 实 际 上 , 这 样 对 HTML 
元 素 进行 分 类 是 不 正确 的 ， 因 为 样式 不 属于 HTML 的 一 部 分 ， 而 是 属于 独立 CSS 标准 ， 
只 不 过 相关 标准 文档 “建议 ”浏览 器 在 显示 某 些 元 素 时 按照 “ 块 ”或 者 “内 联 ” 方 式 显 示 。 
且 一 个 元 素 被 显示 成 “ 块 ” 还 是 “内 联 ” 都 是 可 以 互相 转换 的 。 

由 于 HTML 用 于 表达 语义 和 结构 ， 所 以 自然 而 然 的 HTML 元素 应 该 按照 其 能 够 表达 
的 内 容 去 分 类 。HTML 元 素 所 能 表达 内 容 的 描述 以 及 这 些 元 素 应 该 如 何 互 相 作用 的 描述 ， 
我 们 称 之 为 内 容 模型 。 


QHA: 通俗 地 讲 ， 表 达 内 容 的 描述 指 的 是 某 个 元 素 中 间 应 该 包含 些 什么 内 容 ， 互 相 作用 
则 指 的 是 该 元 素 的 前 后 或 者 里 面 能 出 现 什么 子 代 元 素 或 者 作为 谁 的 子 元 素 。 


这 些 内 容 模 型 大 致 可 以 分 为 如 下 七 类 
元 数据 式 内容 (Metadata content) ; 
流 式 内 容 (Flow content) ; 
章节 式 内 容 (Sectioning content) ; 
标题 式 内 容 (Heading content) ; 
段落 式 内 容 (Phrasing content) ; 
AIAZ (Embedded content). ; 
交互 式 内 容 (Interactive content) 。 
HTML 中 的 每 一 个 元 素 都 可 以 属于 这 七 个 分 类 当中 的 零 个 或 者 多 个 ， 对 于 绝 大 部 分 
HTML 元 素 而 言 ， 分 类 间 有 着 如 图 2.11 所 示 的 关系 。 


DODCDOLDLU 
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图 2.11 内 容 模型 


QFE: 有 的 元 素 是 不 属于 上 述 任何 内 容 模型 分 类 的 ， 比 如 html 元 素 ， 但 是 htm 元 素 也 
有 自己 的 内 容 模型 ， 因 为 html 元 素 也 有 自己 所 表达 的 内 容 以 及 与 其 他 元 素 相互 
作用 的 描述 。 


1. 元 数据 式 内 容 (Metadata content) 

元 数据 式 内 容 通常 指 的 是 在 head 元 素 里 面 常常 出 现 的 那些 个 元 素 ， 它 们 包括 base, 
command, link, meta, noscript, script, style 和 title 这 八 个 ， 它 们 通常 用 于 描述 其 他 内 容 
的 表现 和 行为 或 者 描述 当前 文档 和 其 他 文档 之 间 的 关系 。 

2. ARAR (Flow content) 

在 应 用 程序 和 文档 的 主体 部 分 中 使 用 的 大 部 分 元 素 都 被 分 类 为 流 式 内 容 ， 几 乎 所 有 的 
元 素 都 属于 流 式 元 素 一 一 从 图 2.11 中 也 可 以 看 出 来 ， 只 有 部 分 元 数据 式 元 素 不 属于 流 式 ， 
它们 是 base 和 title 元 素 。 

3， 章 节 式 内 容 (Sectioning content) 

章节 式 内 容 也 可 以 成 为 区 块 式 内 容 ， 它 是 用 于 定义 标题 及 页 脚 范 围 的 内 容 ， 包 含 
article, aside, nav 和 section 四 个 元 素 ， 这 四 个 元 素 都 是 HTML 5 标准 中 新 增 的 元 素 。 章 
节 式 内 容 的 一 个 重要 特点 就 是 它 会 在 页 面 大 纲 视 图 生成 大 纲 级 别 。 

4. 标题 式 内 容 (Heading content) 


顾名思义 ， 标 题 式 就 是 定义 标题 的 元 素 咯 ，hl 到 h6 (没有 h7!)， 以 及 HTML 5 中 新 
增 的 hgroup。 


5. 段落 式 内 容 (Phrasing content) 

段落 式 内 容 ， 从 含义 来 讲 并 不 是 描述 段落 的 内 容 ， 而 通常 是 描述 段落 内 的 内 容 ， 常 见 
的 a、abbr 和 img 等 都 属于 段落 式 内 容 ， 而 表示 段落 (paragraph) 的 p 元 素 则 不 属于 段落 
式 ( 但 它 是 流 式 )， 同 时 这 意味 着 属于 段落 式 内 容 的 标签 不 能 嵌 套 任何 非 段 落 式 标签 。 
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6. ARAA (Embedded content? 


恬 入 式 内 容 是 描述 当前 文档 引用 到 的 其 他 资源 的 内 容 ， 或 者 被 插入 到 本 文档 中 的 其 他 
词汇 的 内 容 。 典 型 的 如 视频 、 音 频 和 Flash 等 ， 都 属于 嵌入 式 内 容 。audio、canvas、embed、 
iframe, img, math, object, svg 和 video 这 九 个 元 素 属 于 嵌入 式 内 容 。 


7. 交互 式 内 容 (Interactive content) 


交互 式 内 容 自 然而 然 是 与 用 户 会 发 生 交互 的 元 素 ， 典 型 的 如 表单 和 菜单 等 ， 典 入 式 中 
的 Flash 等 也 可 以 与 用 户 产生 交互 ， 所 以 它们 同时 也 属于 交互 式 元 素 。 全 部 交互 式 元 素 
如 下 : 


a audio button details embed iframe img input keygen label menu object select 
textarea video 


另外 ， 一 个 元 素 是 否 属于 一 个 内 容 模型 也 不 是 绝对 的 ， 会 存在 限制 条 件 ， 比 如 input 
元 素 在 type 为 hidden 时 ， 就 无 法 与 用 户 进行 交互 ， 此 时 它 便 不 属于 交互 式 元 素 。 

上 文 的 七 种 内 容 模型 分 类 法 都 是 从 内 容 本 身 属性 的 角度 来 分 的 ， 除 了 这 种 分 类 法 ， 还 
有 一 种 从 用 户 角 度 的 分 类 法 ,被 称 为 可 感知 内 容 (Palpable content)。 比 如 应 用 了 hidden 属 
性 的 元 素 就 不 属于 可 感知 内 容 ， 要 注意 这 里 的 可 感知 不 是 指 视觉 上 的 透明 或 者 不 可 见 ， 因 
为 对 于 盲人 用 户 而 言 ， 一 个 元 素 的 不 同 状 态 并 没有 视觉 上 的 区 分 ， 因 此 谈论 感知 与 否 ， 是 
指 对 所 有 用 户 而 言 的 可 感知 。 

理解 内 容 模型 使 得 你 在 使 用 HTML 时 会 更 加 得 心 应 手 ， 知 道 元 素 与 元 素 之 间 如 何 包 
含 ,元 素 应 该 包含 哪些 内 容 , 关于 内 容 模型 的 更 多 资料 ,读者 可 以 查阅 W3C 或 者 WHATWG 
的 相关 文档 。 

接 下 来 的 内 容 ， 我 们 将 详细 讲解 HTML 5 中 的 各 种 元 素 。 此 时 将 按照 元 素 本 身 的 含义 
进行 分 类 讲解 。 


2.84 文档 元 数据 (Document metadata) 


在 HTML 当中 , 元 数据 是 表达 页 面 语 义 最 集中 的 地 方 一 一 元 数据 本 意 便 是 描述 数据 的 
数据 。 如 果 说 一 篇 HIML 文档 包含 数据 以 及 描述 数据 元 数据 ， 那 么 放 在 head 元 素 里 的 元 
素 ， 便 是 元 数据 ， 而 body 元 素 里 面 的 ， 便 是 数据 。 

head 里 面 可 以 包含 的 元 数据 系列 标签 有 title, base, link, style 和 meta， 而 meta 呢 ， 
则 可 以 被 称 为 元 数据 中 的 元 数据 了 (meta 一 词 本 意 就 是 元 的 意思 )。 


1. title 


title 用 于 表示 文档 的 标题 或 者 名 称 一 一 没 错 ， 这 个 标签 实在 是 太 熟 悉 了 ， 不 过 有 一 点 
要 注意 的 是 ，title 里 面 无 法 放置 其 他 元 素 ， 即 便 你 放置 了 ， 也 会 被 转 义 成 纯 文 本 : 
«title» 


标题 里 有 <a href="#"> 链 接 </a> 


«title» 
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最 终 浏 览 器 里 的 显示 效果 如 图 2.12 所 示 。 


6 O O / NHARE <a href> x | " 


e> Cý | D file:///Users/filod/f/book/ch2 /untitled.html 
图 2.12 title 元 素 


2. base 


base 元 素 用 于 指定 文档 的 默认 基地 址 以 及 链接 的 打开 方式 ， 一 例 胜 千言 ; 


<html> 
<head> 
<base href="/new/addr/" /> 
<base target="_blank" /> 
</head> 
<body> 
<!-- 浏览 器 实际 上 会 请 求 /new/addr/1.gif 这 个 文件 --> 
«img src="1.gif" /> 
<!-- 页 面 将 会 在 新 窗口 打开 --> 
<a href-"http://g.cn"»goog !</a> 
</body> 
</html> 
在 移动 框架 jQuerymobile 当中 也 利用 了 base 元 素 的 特性 ， 通 过 JavaScript 脚本 动态 插 
入 base 元 素 以 实现 正确 引用 资源 。 


3. link 


也 许 你 知道 link 用 来 引用 CSS 文件 ， 但 link 元 素 的 其 实 本 领 远 不 止 于 此 。 

link 元 素 允 许 使 用 者 将 他 们 的 文档 链接 到 其 他 资源 , 并 用 rel 属性 表示 这 些 资源 和 文档 
的 关系 。 比 如 我 们 通常 链接 CSS 文件 时 会 指定 rel=stylesheet: 

<link rel="stylesheet" type="text/css" href-"style.css" /> 

这 表示 style.css 这 个 文件 与 引用 它 的 文档 是 样式 表 类 型 ， 要 注意 type 字段 指明 的 是 文 
件 的 MIME 2873. HTML 5 中 rel 属性 允许 的 关键 字 有 多 达 13 个 ， 并 且 可 以 是 由 空格 分 割 
的 多 个 值 组 成 。 下 面 来 看 几 个 比较 实用 的 例子 。 

定义 favicon 〈 就 是 网 页 的 图 标 ): 


<link rel-"icon" href-"/favicon.ico" type="image/x-icon"> 
当 rel=icon 时 ， 我 们 还 可 以 使 用 HTML 5 中 的 新 属性 sizes 规定 被 链接 资源 的 尺寸 : 
<link rel-"icon" href-"demo icon.gif" type-"image/gif" sizes-"16x16" /> 


我 们 在 使 用 现代 浏览 器 时 , 都 会 使 用 自 定义 的 搜索 栏 , 这 属于 OpenSearch 的 一 个 应 用 ， 
图 2.13 是 chrome 的 智能 搜索 框 。 


新 建 标签 页 x 
C fi [QQ 用 百度 搜索 :| 关键 关 


图 2.13 chrome 搜索 框 
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Firefox 的 搜索 框 则 在 右 人 出， 并 包含 小 图 标 ， 如 图 2.14 所 示 。 
—————————— 1 
e | 图 Eu <Ctri+k> 


P 
$I Google | 
äl 百度 


图 2.14 Firefox 搜索 框 


当 使 用 link 标签 指定 rel-search 并 引用 一 个 标准 的 XML 文件 时 ， 可 以 实现 图 2.13 中 
浏览 器 的 自 定义 搜索 : 

<link rel="search" type="application/opensearchdescription+xml" href= 

"/search.xml" title=" 自 定义 搜索 "” /> 


XML 文件 的 内 容 如 下 : 


<?xml version-"1.0" encoding="UTF-8"?> 

XOpenSearchDescription xmlns-"http://a9.com/-/spec/opensearch/1.1/"» 
XInputEncoding»utf-8«/InputEncoding» 
<ShortName> 搜 索引 擎 名 </ShortName> 
<Description> 这 是 一 个 牛 逼 的 搜索 引擎 ， 搜 遍 天 下 ， 噢 耶 </Description> 
<Image type="image/test.icon">favicon</Image> 
XUrl type-"text/html" template-"http://search.everything.com/search? 
word-(searchTerms]"/» 

«/OpenSearchDescription» 


可 以 看 到 只 需要 配置 好 相应 的 选项 ， 即 可 为 用 户 开 启 自 定 搜索 功能 ， 这 个 文件 也 很 容 


口 InputEncoding: 指定 搜索 的 编码 。 

口 ShortName: 这 个 是 搜索 的 短 名 称 ， 比 如 “Google 搜索 ”。 

口 Description: 针对 这 个 搜索 框 的 描述 。 

口 Image: 类 似 网 页 的 favicon ， 用 于 标识 搜索 ， 因 为 Chrome 整合 了 搜索 功能 在 地 
址 栏 里 面 ， 所 以 看 不 到 这 个 icon。 

O Url 这 个 是 最 重要 的 标签 , 用 于 指定 搜索 的 链接 。 它 可 以 配置 很 多 参数 , 一般 使 用 


{searchTerms} 参数 指定 搜索 关键 词 即 可 。 属 性 type=“text/html” 注 明 返 回 的 是 
html 页 面 〈 浏 览 器 会 跳 转 到 这 个 页 面 ) ， 如 果 是 其 他 格式 就 会 使 用 相应 默认 程序 
打开 (比如 type=“application/rss+xml” 就 会 使 用 系统 默认 的 RSS 阅读 器 打开 ) 。 


外 说 明 : 更 多 关于 自 定义 搜索 的 资料 读者 可 以 搜索 OpenSearch 相关 文档 。 


苹果 的 iOS 系统 允许 将 网 页 添加 到 桌面 上 (safari 中 选择 “添加 到 主屏 幕 ”)， 好 让 你 
的 网 站 看 起 来 更 像 一 个 原生 的 应 用 。 不 过 既然 作为 桌面 的 “应 用 ”图 标 肯 定 是 少不了 的 ， 
添加 图 标的 方式 也 很 简单 ， 一 个 带 上 rel 属性 的 link 标签 即 可 搞定 : 


<link rel-"apple-touch-icon" href-"icon 57px.png" /> 
<link rel-"apple-touch-icon-precomposed" href=" icon 72px.png" sizes- 
my2scp2 nt 
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因为 10S 有 几 种 不 同 的 分 辩 率 ， 所 以 你 可 以 针对 不 同 的 分 辩 率 指定 不 同 尺 寸 的 icon， 
以 便 在 retina 显示 屏 和 非 retina 显示 屏 上 都 获得 最 好 的 效果 。 

apple-touch-icon-precomposed 和 apple-touch-icon 的 区 别 : 苹果 iOS 的 桌面 icon 有 一 套 
统一 的 样式 规范 ， 即 加 上 一 些 高 光 和 阴影 特效 使 得 所 有 的 图 标 看 起 来 都 是 一 个 风格 ， 如 果 
你 需要 保留 你 图 标的 原始 样式 , 就 使 用 apple-touch-icon-precomposed, precomposed 意 即 “ 预 
先 设 计 的 ”图 标 。 

类 似 的 , 我 们 还 可 以 为 Web 应 用 加 上 启动 画面 ( 单 击 图 标 后 在 页 面 加 载 完 成 之 前 显示 
的 一 副 广 告 图 ): 

<link rel-"apple-touch-startup-image" media="screen and (orientation: 

portrait)" href-"/apple startup.png"» 


<link rel-"apple-touch-startup-image" media="screen and (orientation: 
landscape)" href-"/apple startupl.png"» 


其 中 portrait 表示 在 设备 竖 屏 时 使 用 的 图 片 ，landscape 指 横 屏 。 


4. meta 


meta 元 素 有 多 种 功能 ， 比 如 可 以 用 来 设置 文档 的 字符 集 : 

«meta http-equiv-"content-type" content-"text/html; charset=utf8"> 

要 注意 的 是 ， 这 种 方法 之 所 以 能 设置 字符 集 ， 得 益 于 http-equiv 和 content 实际 上 是 在 
设置 http 头 部 信息 。http-equiv 里 的 equiv 其 实 就 是 等 价 Cequivalent) 的 简写 ， 表 示 其 值 和 
http 包 的 头 部 是 等 价 的。 因此 任何 合法 的 http 的 头 部 字段 都 可 以 写 在 meta 标签 里 面 ， 如 5 
秒 后 刷新 页 面 : 

<meta http-equiv="refresh" content="5" /> 

或 者 设置 cookie: 

<meta http-equiv="set-cookie" content="key=x;path=/" /> 

在 HTML 5 中 简化 了 设置 字符 集 的 方式 ， 毕 况 记 http 包头 格式 还 挺 烦人 的 ; 


«meta charset-"utf8" /> 


此 外 , meta 还 可 以 使 用 name 和 content 两 个 属性 来 定义 一 系列 的 功能 或 者 行为 的 预 编 
译 指令 (pragma directives)， 标 准 的 name 值 有 如 下 六 个 。 
application-name: 文档 名 或 者 应 用 名 ， 整 个 文档 只 能 包含 一 个 值 。 
author: 文档 作者 。 
description: 文档 描述 。 
generator: 生成 文档 的 程序 。 
keywords: 网 页 关键 字 ， 用 英文 逗号 分 隔 。 


DODCLDUO 


OE: author. description 和 keywords 通常 在 SEO 的 时 候 发 挥 着 重要 作用 ， 不 过 目前 
Google 已 经 不 再 使 用 他 们 作为 评价 网 页 内 容 的 要 素 ,， 但 是 百度 依然 使 用 他 们 ， 因 
此 如 果 你 要 做 SEO， 可 以 更 加 有 针对 性 的 使 用 这 些 meta 标签 。 


除了 标准 的 name 值 以 外 ， 有 的 厂商 (如 苹果 ) 和 标准 工作 组 还 注册 了 许多 扩展 的 元 
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数据 名 ， 如 iOS 6 之 后 推出 了 smart banner 功能 ， 页 面 中 ， 再 使 用 safari 访问 时 弹出 下 载 应 
用 的 提示 : 


«meta name-"apple-itunes-app" content-"app-id-123456789"» 


再 比如 ， 在 移动 设备 中 一 个 十 分 重要 的 viewport 选项 : 

<meta name="viewport" content="user-scalable=no, width=device-width, 

initial-scale-1.0, maximum-scale-1.0"/» 

该 指令 使 得 页 面 将 不 能 被 手动 缩放 ， 并 且 初 始 缩放 比例 和 最 大 缩放 比例 都 为 1.0。 针 
对 移动 设备 特别 优化 过 的 CSS 样式 再 配合 这 个 指令 会 使 你 的 网 站 用 户 体验 更 好 。 


2.3.5 KH (sections) 


这 个 世界 显然 不 止 是 有 DIV 的 存在 的 ，HTML 5 中 的 区 块 元 素 们 便 是 让 你 清晰 认识 到 
这 一 点 的 存在 。 

区 块 元 素 是 HTML 中 很 重要 的 部 分 ， 绝 大 部 分 文档 的 结构 都 应 由 区 块 元 素 们 来 定义 ， 
这 部 分 同时 也 是 HTML 5 相对 于 之 前 版 本 新 增 标签 最 集中 的 地 方 ， 这 些 标签 如 下 。 
body: 文档 的 主体 部 分 。 
article: 定义 文章 。 
section: 定义 节 ， 表 示 专 题 。 
nav: 定义 导航 结构 。 
aside: 定义 附属 结构 。 
hl-h6 和 hgroup: 定义 标题 和 标题 组 。 
header. footer: 定义 头 部 和 尾部 。 
address: 联系 人 信息 。 
接 来 下 详细 讲解 在 HTML 5 中 这 些 标签 的 适用 范围 和 注意 事项 。 


OOOOOOODO 


1. article 


article 可 用 来 定义 独立 的 文档 、 页 面 、 应 用 甚至 站 点 ， 使 用 article 的 标准 是 判断 其 内 
的 内 容 是 否 可 以 单独 发 布 或 重用 。 因 此 ， 一 篇 帖子 或 者 文章 ， 一 篇 用 户 评论 甚至 一 个 页 面 
交互 组 件 ， 都 可 以 使 用 article 来 定义 : 


«article» 
<header> 
<h1> 专 家 分 析 习 近 平 重 走 南 巡 路 : 坚定 走 改革 道路 </h1> 
«p»«time» 3 天 前 </time></p> 
</header> 
<p> 
专家 认为 ， 在 邓小平 " 南 巡 "20 周年 之 际 ， 习 近 平 此 次 深圳 行 富 意 深刻 ， 
不 仅 表达 坚定 改革 的 信心 ， 更 重要 的 是 为 实现 十 八大 深化 改革 目标 寻找 突破 口 。 
</p> 
Vere 
«footer» 
«a href="?comments=1"> 查 看 评论 . . .</a> 
</footer> 
</article> 
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如 果 这 时 我 们 要 定义 这 篇 新 闻 的 用 户 评论 ， 理 所 当然 的 可 以 嵌 套 使 用 article 元 素 : 


«article» 
«header» 
<h1> 专 家 分 析 习 近 平 重 走 南 巡 路 : 坚定 走 改革 道路 </h1> 
<p><time> 3 天 前 </time></p> 
</header> 
<p> 
专家 认为 ， 在 邓小平 " 南 巡 "20 周年 之 际 ， 习 近 平 此 次 深圳 行 寅 意 深刻 ， 
不 仅 表达 坚定 改革 的 信心 ， 更 重要 的 是 为 实现 十 八大 深化 改革 目标 寻找 突破 口 。 
</p> 
<p>... (省 略 五 千 字 ) </p> 
«section» 
«h1»ifit«/h1» 
«article id-"c1"» 
«footer» 
<p> 
by: <span> 匿 名 网 友 </span> 
</p> 
<p> 
<span>10 天 前 </span> 
</p> 
</footer> 
<p> 伟 大 的 中 国 在 习 主 席 的 坚强 领导 下 , 大 显 公 正 公平 , 内 斗 内 耗 全 无 , 一 臻 发展 前 进 ! </p> 
</article> 
<article id="c2"> 
<footer> 
<p> 
by: <span> 又 一 个 匿名 网 友 </ span> 
</p> 
<p> 
<span>5 分 钟 前 </span> 
</p> 
</footer> 
<P> 更 幸福 的 明天 已 现 电光 ! </p> 
</article> 
</section> 
</article> 


2. section 


如 果 我 们 按 主题 将 内 容 分 “组 ” 那么 这 一 个 个 “分 组 ” AEEA i section 来 定义 。 
这 些 分 组 实际 上 就 是 我 们 前 面 提 到 的 章节 或 者 说 区 块 ， 通 常 这 些 区 块 也 会 带 上 一 个 标题 
(heading)。 因 为 section 会 影响 整个 文档 大 纲 的 生成 ， 因 此 切忌 将 section sir 个 语义 
化 的 div. 


<article> 
<hgroup> 
<h1> 苹 果 </h1> 
<h2> 可 口 而 诱 人 ! </h2> 
</hgroup> 
<p> 苹 果 是 接 在 苹果 树 上 的 一 种 苹果 状 的 水 果 。</P> 
Xsection» 
<h1> 红 富士 </h1> 
Xp» 


红 富 士 是 着 色 系 富士 的 总 称 。 在 富士 推广 栽培 过 程 中 ， 
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由 于 其 具有 较 活跃 的 遗传 性 变异 特点 。 
</p> 
</section> 
<section> 
<h1> 红 将 军 </h1> 
<p> 
日 本 引进 ， 结 果 早 ， 果 个 大 ， 丰 产 ， 单 果 重 450 克 ， 果 面 全 红 ， 
9 月 中 旬 成 熟 ， 国 庆 节 和 中 秋 节 上 市 。 是 中 熟 苹果 的 首选 良种 
</p> 
</section> 
</article> 


上 面 这 个 例子 里 ，article 定义 了 一 篇 关于 苹果 的 文章 ，section 里 定义 的 是 整个 文章 的 
各 个 小 节 ， 小 节 拥 有 自己 的 标题 。 同 理 书籍 章节 目录 也 可 以 使 用 section 来 表示 : 


<article class="book"> 
<header> 
<hgroup> 
<h1>HTML 5 移动 应 用 开发 </h1> 
<h2> 用 心 写 好 书 </h2> 
</hgroup> 
<p> 
<small> 人 民 英 雄 文学 出 版 社 出 版 </ small» 
</p> 
</header> 
<section class="chapter"> 
<h1> 第 一 章 </h1> 
<p> 移 动 时 代 ， 唯 HTML5 独 尊 </p> 
</section> 
<section class="chapter"> 
<h1> 第 二 章 </h1> 
<p>HTML 基础 牢 实 ， 方 能 百 战 不 殉 </p> 
</section> 
Xsection class="appendix"> 
<h1> 附 录 A: jQuery 简明 教程 </h1> 
Xp»Write Less, Do more.«/p» 
X/section» 
«/article» 


是 该 用 section 还 是 其 他 标签 有 一 个 简单 易 行 的 判断 标准 : 你 所 要 定义 的 内 容 如 果 需 要 
出 现在 文档 的 提纲 中 时 ， 用 section 是 合适 的 。 


3. nav 


nav 元 素 从 字面 上 就 能 看 出 定义 的 是 导航 (navigation) Kit, nav 元 素 的 重要 作用 就 
是 帮助 用 户 快 速 导航 ， 尤 其 是 对 于 盲人 用 户 ， 屏 幕 阅读 器 可 以 在 初始 化 页 面 的 时 候 就 先 阅 
读 nav 元 素 里 的 链接 内 容 。 
例如 这 个 页 面 里 ，nav 用 来 表示 最 重要 的 导航 : 
<body> 
<header> 
<h1> 小 明 的 日 记 本 </h1> 
<p><a href="news .html"> 新 闻 </a> - 


<a href="blog.html"> 博 客 </a> - 
<a href="forums.html"> 论 坛 </a></p> 
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<p> 上 次 修改 : <span>2013-04-01</span></p> 
<nav> 

<h1> 导 航 </h1> 

«ul» 


<li><a href-"articles.html"»fffí«/a»«/li» 


<li><a href-"today.html"»4 H4A[]«/a»«/1li» 


<li><a href-"successes.html"»«/a»«/li» 
</ul> 


</nav> 
</header> 
<div> 
<article> 
<header> 
<h1> 今 天 好 伤心 </h1> 
</header> 
<div> 
<p> 今 天 一 天 都 没有 出 太阳 , 真 不 好 , 爸爸 买 回 两 条 金鱼 , FEKE, 我 很 伤心 。.</p> 
</div> 
<footer> 
<p>Posted <time datetime="2009-10-10">Thursday</time>.</p> 
</footer> 
</article> 
-..more blog posts... 
«/div» 
«footer» 
Xp»Copyright © 
Xspan»2012«/span» 
<span> 某 神奇 有 限 公 司 </ span» 
</p> 
<p><a href="about.html"> 关 于 </a> - 
«a href="policy.html"> 隐 私 权 </a> - 


«a href="contact .html"> 联 系 我 们 </a></p> 
</footer> 


</body> 


nav 元 素 里 主要 用 来 放置 页 面 上 相对 重要 的 导航 链接 区 块 ， 这 就 意味 着 并 不 是 页 面 上 
所 有 的 导航 链接 都 需要 放 在 nav 里 面 。 例如 , 很 多 页 面 都 会 在 footer 里 面 放 一 些 版 权 声 明 、 
用 户 协议 和 联系 信息 等 的 链接 ， 对 于 这 些 链接 ， 虽 然 依然 可 以 使 用 nav, 但 由 于 footer 元 
素 本 身 己 经 足够 表达 “底部 ”这 样 的 信息 ， 因 此 nav 元 素 会 显得 不 是 很 必要 。 上 面 这 个 例 
子 ， 就 包含 多 处 导航 链接 ， 但 是 只 有 最 重要 的 地 方 使 用 了 nav 元 素 。 

总 之 ， 虽然 nav 的 使 用 限制 不 多 ， 所 有 ul 和 ol 元素 都 给 套 上 nav， 更 何况 nav 其 实 里 
面 不 一 定 需要 放置 列表 元 素 : 

«nav» 

<h1> 得 得 我 的 网 站 </h1> 

<p> 我 的 网 站 里 有 丰富 多 彩 的 内 容 ， 你 可 以 看 看 <a href="/blog"> 我 的 博客 

</a>， 如 果 你 想 雇佣 我 ， 也 可 以 看 看 我 的 <a href="/resume"> 简 历 </a> 和 


«a href-"/works"»[ÍFüh«/a», </p> 
<p> 同 时 ， 作 为 一 个 摄影 爱好 者 ， 我 也 有 许多 <a href="/photos"> 照 片 </a> 
希望 你 能 喜欢 这 个 网 站 。 


</nav> 


为 何 nav 里 面 要 放置 标题 元 素 ? nav 也 是 区 块 元 素 中 的 一 员 , 从 级 别 上 来 说 , 和 section 
元 素 是 一 样 的， 只 是 它 还 表达 了 导航 的 语义 。 对 于 article 和 section 是 必须 要 加 上 标题 的 ， 
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nav 和 aside 则 建议 加 上 标题 。 因为 这 样 才 有 助 于 机 器 去 生成 “大 纲 视图 ”这 样 的 最 终 产物 。 


4. aside 


aside 元 素 一 般 用 来 定义 你 需要 定义 和 你 当前 已 
有 内 容 相 关 的 内 容 时 ， 就 用 aside。 要 注意 的 是 ，aside 里 的 内 容 要 和 它 所 关联 的 内 容 相 互 
独立 ， 也 就 是 说 ， 他 们 虽然 相关 ， 但 是 关系 不 太 密切 ， 谁 缺 了 谁 都 不 影响 各 自 文 本 含义 的 
理解 。 一 篇 文章 出 现 的 相关 广告 、 相 关 背 景 和 引述 内 容 等 等 都 可 以 使 用 aside， 但 是 像 文 中 
本 该 出 现在 括 弧 里 的 内 容 就 不 适合 用 aside， 因 为 这 种 内 容 是 属于 文档 主要 内 容 的 一 部 分 。 
比如 在 一 篇 介绍 苹果 公司 的 文本 中 可 以 嵌入 一 段 关于 iPhone 的 介绍 : 


<aside> 
<h1>iPhone</h1> 
<p>iPhone 5 如 此 纤 薄 ， 如 此 轻盈 ， 却 配备 了 更 大 的 显示 屏 、 更 快 的 芯片 、 更 新 的 无 线 技术 、 
800 万 像素 isight 摄像 头 及 更 多 精彩 功能 。</P> 


«/aside» 


再 比如 我 们 经 常 在 书籍 排版 中 看 到 的 引述 (pull quote)， 如 图 2.15 所 示 。 


Pullquotes That Really Pull 


Tm using the "Alternate Box Model Hack #3 to dumb-down 
the rendering in Internet Explorer 5 and 5.5. Tbere is a full. 
explanation of this technique (and others) at CSS-Discuns- 


— most modern browsers. correctly 


CC The most 
impressive 
thing about 
pullquotes is 
people read 


图 2.15 pull quote 


Xp»He later joined a large company, continuing on the same work. 
Xq»I love my job. People ask me what I do for fun when I'm not at 
work. But I'm paid to do my hobby, so I never know what to 

answer. Some people wonder what they would do if they didn't have to 


work... but I know what I would do, because I was unemployed for a 
year, and I filled that time doing exactly what I do now.</q></p> 
«aside» 


<q> People ask me what I do for fun when I'm not at work. But I'm 
paid to do my hobby, so I never know what to answer. «/q» 
«/aside» 
Xp»Of course his work 一 or should that be hobby? 一 
isn't his only passion. He also enjoys other pleasures.</p> 


博客 网 站 中 的 边栏 可 以 用 aside， 边 栏 里 面 友情 链接 也 可 以 使 用 aside 


这 意味 着 
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aside 也 可 以 财 套 使 用 〈 实 际 上 表示 区 块 的 元 素 几 乎 都 可 以 嵌 套 )。 下 例 是 一 个 结合 了 aside 
和 nav 等 元 素 的 博客 代码 : 


<body> 
<header> 
<h1> 我 的 博客 </h1> 
<p> 一 个 神奇 的 地 方 </p> 
</header> 
<aside> 
<!-- 这 两 个 nav 区 块 都 和 页 面 主 内 容 非 密切 相关 --> 
«nav» 
Xh1»My blogroll«/hl» 
«ul» 
«li» 
<a href="http://blog.xiaoming.com/"> 朋 友 小 明 的 博客 </a> 
</li> 
</ul> 
</nav> 
<nav> 
<h1> 文 章 存档 </h1> 
<ol reversed> 
«li» 
<a href="/last-post"> 最 后 一 篇 </a> 
«/li» 
cere 
«a href="/first-post"> 第 一 篇 </a> 
</1i> 
</ol> 
</nav> 
</aside> 
<aside> 
<!-- 另 一 个 博客 里 常见 的 边栏 区 块 : 微 博 插件 --> 
<h1> 来 自 微 博 </h1> 
<blockquote cite="http://weibo.com/2656274875/z9oc4cvT7">【 小 行星 "战神 "下 
F 2 点 到 达 近 地 点 】 今 天 下 午 2 点 左右 ， 一 颗 名 为 "战神 "的 小 行星 将 运行 到 与 地 球 最 近 位 置 ， 这 个 
"最 近 " 的 距离 也 有 690 万 公里 ， 相 当 于 地 球 与 月 球 距离 的 18 倍 。</blockquote> 
<blockquote cite="http://weibo.com/1195031270/z90DPoFU7">2012 年 12 月 14 
日 是 全 球 儿童 悲伤 日 。 世 界 排名 前 两 位 的 经 济 体 美国 和 中 国 在 同一 天 发 生 了 惨 绝 人 赛 的 针对 儿童 的 
RSS 3E«/blockquote» 
«/aside» 
«article» 
<!— 博客 主 区 域 --> 
<h1>4 月 2 日 , 今天 天 气 好 </h1> 
<p> 然 后 我 就 不 知道 写 什 么 了 </p> 
<footer> 
<p> 
<a href-"/last-post" rel=bookmark> 固 定 链接 </a> 
</footer> 
</article> 
«article» 
<h1>4 H 1 H.. ， 过 愚人 节 咯 ! </h1> 
<p> 谁 看 到 谁 傻 Xx </p> 
<aside> 
<!-- 如 果 这 个 aside 标签 里 面 是 友情 链接 ， 那 显然 是 错误 的 ， 
但 是 如 果 是 这 篇 博文 的 相关 内 容 ， 那 就 是 可 以 的 。 --> 
<h1> 关 于 日 记 </h1> 
<p> 
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关于 aside 典型 的 的 误 用 是 将 sidebar 的 内 容 一 股 脑 儿 全 部 改 成 aside。 
5. h1—h6, hgroup 


hl—h6 都 用 来 表示 区 块 的 标题 ，h 后 面 跟 的 数字 表示 标题 的 级 别 ，hl 级 别 最 高 ，h6 
级 别 最 低 。 

尤为 要 注意 的 是 ，h 标签 表示 的 是 区 块 的 标题 ， 而 不 是 文档 的 标题 ， 这 意味 着 标题 的 
级 别 实 际 上 会 是 相对 于 它 所 在 的 区 块 元 素 的 ， 而 且 根据 区 块 的 嵌 套 情况 ， 标 题 的 级 别 也 会 
相应 的 变化 ， 比 如 这 段 代码 : 


和 这 段 代码 : 
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</section> 
</body> 


它们 在 语义 上 是 完全 等 价 的 。 选 择 何 种 风格 的 编写 方式 完全 可 以 根据 你 自己 的 需要 来 
安排 。 
hgroup 这 个 新 增 元 素 则 用 于 组 合 标 题 ， 只 在 区 块 需要 有 多 个 级 别 的 标题 时 使 用 
标题 和 标语 Ctagline) 等 。 前 面 关于 苹果 的 例子 便 定义 了 一 个 标语 : 
«article» 
<hgroup> 
<h1> 蔷 果 </h1> 


<h2> 可 口 而 诱 人 ! «/h2» 
</hgroup> 


副 


</article> 


hgroup 本 身 作为 区 块 时 ， 它 的 级 别 和 它 包含 的 最 高 级 别 的 标题 子 元 素 一 样 ， 比 如 上 例 
中 hgroup 的 级 别 就 和 hl 是 一 样 的 。 
<hgroup> 
<h1> 三 体 </h1> 
<h2>" 地 球 往事 "三 部 曲 之 一 </h2> 
</hgroup> 
<hgroup> 
<h1> 三 体 </h1> 
<h2> 黑 暗 森 林 </h2> 
</hgroup> 
在 这 个 例子 中 ， 你 可 以 理解 为 这 个 代码 片段 有 两 个 标题 ， 每 个 标题 都 包含 主 标题 和 副 
标题 。 
6. header & footer 


header 理所当然 用 来 放 “ 头 部 ”和 “顶部 ”的 内 容 ， 比 如 目录 、 搜 索 框 和 logo 等 东西 。 
footer 与 header 对 应 ， 用 来 定义 “尾部 ”和 “底部 ”。 

前 面 很 多 例子 其 实 已 经 用 到 了 header 和 footer, 这 些 情况 下 header 的 用 法 都 是 正确 的 。 
不 过 要 注意 的 是 ，header 并 不 定义 区 块 内 容 Csection content) 一 一 即 不 具备 产生 大 纲 视图 
的 特性 。 


DFE: 我 们 在 这 个 小 节 所 说 的 区 块 标签 和 区 块 内 容 并 不 是 一 个 东西 ， 区 块 内 容 标签 只 有 
article. aside. nav 和 section 四 个 ， 它 们 会 在 文档 大 纲 中 产生 级 别 。 


header 和 footer 可 以 定义 整个 文档 级 别 的 头 尾部 ， 也 可 以 定义 区 块 级 别 的 头 尾部 ， 而 
且 footer 不 一 定 非得 出 现在 区 块 的 结尾 部 分 : 


«body» 
«1-- 这 里 的 footer 和 文档 结尾 的 footer 内 容 相 同 ， 均 定义 了 站 点 级 别 Cside-wite) 的 
尾部 --> 
«footer» 
«nav» 
«a href="/"> 回 到 首页 </a> 
<a href="/about"> 关 于 </a> 


ya 


第 1 篇 HIML 5 移动 Web 开发 基础 


«/nav» 
</footer> 
<hgroup> 
<h1>Lorem ipsum</h1> 
<h2>The ipsum of all lorems</h2> 
</hgroup> 
<article> 
<hl>article 1«/h1» 
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
ea commodo consequat.«/p» 
«footer» 
Xp»«time dataime-"2012-10-21T18:26-07:00"22012/10/21 6:26pm«/time»«/p» 
«/footer» 
«/article» 
Xarticle» 
Xhl»article 2«/h1» 
Xp»Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.«/p» 
X/article» 
«footer» 
Xp»«time dataime-"2012-10-22T21:26-07:00"»2012/10/22 9:26pm«/time»«/p» 
«/footer» 
<p> </p> 
<footer> 
<nav> 
<a href="/"> 回 到 首页 </a> 
<a href="/about"> 关 于 </a> 
</nav> 
</footer> 
</body> 


7. address 


address 元 素 专 门 用 来 表示 和 它 最 近 的 父 级 article 或 者 body 元 素 里 内 容 相 关联 的 联系 
信息 。 比 如 在 body 里 出 现 的 address 就 用 来 表示 与 这 个 文档 相关 的 联系 信息 : 


<footer> 
<!-- address 通常 会 出 现在 footer 元 素 里 面 --> 
<address> 
<a href="/people/bill">Bill Gates</a> 
<a href="/people/jobs">Steve Jobs</a> 
</address> 
</footer> 
</body> 


可 能 到 说 到 这 儿 你 依然 无 法 准确 地 判断 该 使 用 何 种 区 块 元 素 ， 没 关系 ， 看 看 下 面 的 大 
杀 器 ， 你 或 许 会 变 得 见 然 开朗 ， 如 图 2.16 所 示 。 
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附加 说 明 ~ 
附 图 ? 


可 否 添加 标题 ? 


<section> 


<article> 中 的 
带 有 一 个 标题 


da RR a nes ook 
图 2.16 如 何 选择 区 块 元 素 
2.3.6 分 组 内 容 (grouping content) 
很 多 内 容 我 们 都 是 希望 对 它们 分 组 来 进行 描述 ， 如 列表 里 的 项 目 和 相册 中 的 图 片 等 


等 。 这 些 内 容 通 常 而 言 都 是 成 “ 块 ”的 ， 通 过 表 2-2， 你 可 以 大 致 了 解 到 用 于 分 组 内 容 的 
元 素 有 哪些 ， 以 及 它们 的 基本 用 法 。 


表 2-2 分 组 内 容 元 素 总 览 


元 示 例 
<p> 
定义 段落 。 陈 某 某 因为 父亲 为 高 级 公务 员 ， 有 机 会 利用 政府 津贴 
段落 不 一 定 是 文章 里 面 的 段落 ， | 到 英国 读书 ， 
P 这 里 的 “段落 ” 指 的 是 主题 相近 | 故 中 学 和 大 学 时 光 均 在 英国 渡 过 。 大 学 时 期 曾 修 读 建 
的 若干 句子 组 成 的 文本 块 筑 学 及 4 年 音乐 课程 。 


«p» 
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元 EX A B zm fi 
«section 
<hl>Food</h1> 
<p>All food at the project is rationed:</p> 
HTML 4 时 用 于 定义 水 平 线 | <d> 
Chorizontal rule) 。HTML 5 重新 <dt>Potatoes</dt> 
" 定义 它 为 不 同 主题 内 容 间 的 分 <dd>Two per day</dd> 
隔 符 。 <dt>Soup</dt> 
iE: 区 块 内 容 之 问 不 需要 使 用 hr | <dd>One bowl per day</dd> 
进行 分 割 </dl> 
<hr> 
<p>Cooking is done by the chefs on a set rotation.</p> 
</section> 
<pre> 
通常 表示 已 排版 的 内 容 ， 比 如 代 | /| o adL 
码 块 和 字符 画 等 等 ICLN VOI] 
VV A A, | 
</pre> 
引用 来 自 其 他 来 源 的 内 容 ，cite | <blockquote> 
i 属性 表示 来 源 urle <p> 横 眉 冷 对 千夫 指 ， 俯 首 甘 为 王子 牛 。</p> 
注 : 引用 的 署名 必须 在 引用 外 部 | </blockquote> 
义 <p> 鲁迅 </p> 
ol 定义 有 序列 表 <p> 我 曾经 去 过 的 城市 〈 按 拼音 排序 ) : </p> 
ul 定义 无 序列 表 <ol> 
li» </li> 
«li si 
li 定义 列表 项 <li> 深 圳 </i> 
<li>X </i> 
</ol> 
dl 定义 列表 <dl> 
dt 定义 的 项 目 <dt lang="en-US"> <dfn>color</dfn> </dt> 
<dt lang="en-GB"> <dfn>colour</dfn> </dt> 
定义 的 描述 。 ie x sensation which (in humans) derives from the 
dd si a T Pus en " T 个 反 the fine structure of the eye to distinguish three 
之 同 理 differently 
filtered analyses of a view. </dd> 
</d> 
figuree | 定义 媒介 内 容 的 分 组 ， 以 及 它们 
的 标题 详细 见 后 文 
figcaption* | 定义 figure 元 素 的 标题 
div 通常 会 被 认为 是 区 块 元 素 , 但 
实际 上 div 是 不 包含 语义 的 分 组 
div 内 容 元 素 。 无 论 是 区 块 也 好 ， 分 | 详细 见 后 文 


组 内 容 也 好 ， 在 语义 层面 上 ，div 
都 是 最 后 被 考虑 的 元 素 


HS 加 * 号 为 HTML 5 新 增 标签 。 
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表 2-2 中 展示 了 所 有 分 组 内 容 元 素 的 基本 用 法 ， 分 组 内 容 元 素 中 两 个 新 进 成 员 可 能 需 
要 你 注意 一 下 ，figure 和 figcaption. 


figure 通常 是 比较 独立 、 被 主要 内 容 引用 的 部 分 ， 可 以 用 来 定义 插图 注解 、 图 表 、 照 
片 和 代码 列表 等 ， 通 常会 配合 figcaption 元 素 定义 其 标题 或 者 说 明 : 


<figure> 
<img src-"beautiful-girl.jpeg" 
alt="a beautiful girl sitting on a chair"> 
<figcaption> 青 春 美女 一 枚 </figcaption> 
</figure> 


当然 ，figure to UREE: 


«figure» 
«figcaption»The castle through the ages: 1423, 1858, and 1999 respectively. 
«/figcaption» 
«figure» 
X«figcaption»Etching. Anonymous, ca. 1423.«/figcaption» 


<img src-"castle1423.jpeg" alt-"The castle has one tower, and a tall wall 
around it."» 


</figure> 
<figure> 
<figcaption>0il-based paint on canvas. Maria Towle, 1858.</figcaption> 


<img src="castle1858.jpeg" alt="The castle now has two towers and two 
walls."» 


</figure> 

<figure> 
<figcaption>Film photograph. Peter Jankle, 1999.</figcaption> 
<img src="castle1999.jpeg" alt="The castle lies in ruins, the original 
tower all that remains in one piece."> 

</figure> 

</figure> 


FØRE H figure 也 可 以 被 简写 成 下 例 的 形式 : 
«figure» 
<img src-"castlel1423.jpeg" title-"Etching. Anonymous, ca. 1423." 
alt-"The castle has one tower, and a tall wall around it."» 
«img src-"castle1858.jpeg" title-"Oil-based paint on canvas. Maria Towle, 
1858." alt-"The castle now has two towers and two walls."> 
«img src-"castle1999.jpeg" title-"Film photograph. Peter Jankle, 1999." 
alt-"The castle lies in ruins, the original tower all that remains in 
one piece."» 
«figcaption»The castle through the ages: 1423, 1858, and 1999 respectively. 
</figcaption> 
</figure> 


ol 表示 有 序列 表 ， 这 个 几乎 人 人 都 知道 ， 另 外 你 可 能 不 知道 的 是 ， 在 HTML 5 中 ，ol 
还 可 以 拥有 start 和 reversed 属性 。start 只 能 是 整数 ， 表 示 这 个 列表 从 多 少 开始 ， 每 个 i 上 
可 以 有 value 属性 ， 表 示 这 是 列表 中 的 第 几 个 : 

Xol start-"122" reversed» 
«li»z«/li» 
«li»y«/li» 
<li value-"98"»b«/li» 
Xli»a«/li» 

«/ol» 
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这 个 例子 在 chrome 中 的 最 终 效 果 如 图 2.17 所 示 。 
注 : reversed 属性 截止 到 本 稿 撰写 时 ， 仅 有 chrome 支持 
reversed 属性 。 


192.7 
121. y 
98. b 
97. a 


图 2.17 reverse 和 value 属性 


2.3.7 文本 级 语义 (text-level semantics) 


分 组 内 容 和 区 块 内 容 元 素 通 常 在 文档 中 充当 容器 和 包含 块 
等 角色 ， 因 此 浏览 器 在 显示 他 们 时 也 会 默认 以 块 框 (block-level box) 方式 显示 (在 CSS 
中 即 display:block)， 而 这 些 框 里 面 填充 的 内 容 ， 会 有 一 整套 文本 级 别 的 元 素 任 君 挑选 ， 他 
们 通常 以 行 框 (inline-level box) 方式 显示 (CSS 中 即 display:inline 或 display:inline-block )， 
如 表 2-3 所 示 。 


表 2-3 文本 级 语义 


元 R A B zm fi 
超 链 接 5 
单 击 <a hre 全 "detail html"> 此 处 </a> 查 看 后 文 
a 下 文 将 详细 介绍 单 击 <a letai! 此 处 </a> 查 看 后 文 
WESKI. TREE KE | o sn gy aa " um 
c 想 说 的 是 ， 我 <em>> 喜 欢 </em>> 宫 崎 骏 的 动画 
em 个 数 越 多 ， 强 调 级 别 越 高 我 想 说 的 是 ， 我 <em> 喜 欢 </em 骏 的 动画 
示 内 容重 要 性 。 -FETT ELK Lr 
strong id 2. ii 2r em —FESTEUÉE 今天 天 气 <strong> 好 冷 </strong> 
x i. E. J 
ZW (Side comments) ， 可 应 用 在 | rin into wine. <small>Alcohol is 
small 免责 声明 、 使 用 条 款 和 版 权 信息 等 
需要 小 字体 的 # 景 
"m <smal> 请 以 实物 为 准 ， 图 片 仅 供 参 考 <jsmall> 
有 误 文本 (Inaccurate text) ， 一 般 | 、，- 
京东 价 : <s> 王 1280</s> Y 998! 
UA 会 为 其 加 上 删除 线 的 样式 A 
=- 口 ER "T Š b ù " EA J 
cite 作品 标题 的 引用 ， 可 以 是 书 、 影 、 | 我 最 喜欢 的 电影 是 <cite> 千 与 干 寻 <jeite> 
音 和 画作 等 
短 引用 ， 可 以 是 某 人 的 一 句 话 。 The judge said <q>You can drink water from the fish 
1 ik: 用 引号 也 可 以 表达 等 价 语义 tank</q> but advised against it. 
dfh 定义 的 实例 ， 通 常用 来 定义 术语 The term <dfn>organic food</dfn> refers to food 
produced without synthetic chemicals. 
<p>The «dfn»-abbr title-"Garage Door Opener" 
Rc . - We GDO</abbr></dfn> 
abbr 缩写 词 , 可 以 配合 di 元 素 定义 术语 | ，， 
is a device that allows off-world teams to open the 
iris.</p> 
E FEWER —' 常年 有 售 ! «data value-"EAN-13: 6901234567890 > 
为 元 素 赋 子 机 器 可 读 的 数据 社 某 斯 <small> 超 薄 版 </small></data> 
F iPhone5 将 于 <time datetime="2012-12-14"> 明 日 凌晨 
time* data 标签 的 时 间 格式 版 本 </time> 开 售 ! 
code 计算 机 代码 运行 <code>ls</code> 命 令 查看 当前 目录 
定义 变量 If there are «var»n-/var^ fruit in the bowl, at least 
va i m «var»n«/var^-2 will be ripe. 
samp 计算 机 程序 的 输出 <samp>Unknown error -3</samp> 
kbd 用 户 输入 (按键 ) Press <kbd>Enter</kbd> to continue. 
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续 表 
mE X A B 示 fi 
i 上 标 文 本 Water is H<sub>2</sub>0. 
PR " 

B Water is H2O. 
f(<var>x</var>, <var>n</var>) = log<sub>4</sub> 

sup 下 标 文本 <var>x</var><sup><var>n</var></sup> 

f(x n) = log4x? 
i 另 一 种 叙述 方式 (斜体 ) Lemonade consists primarily of <i>Citrus limon</i> 
X Take a <b>lemon</b> and squeeze it with a 
E e ( 

» 关键 文字 ( 粗 体 ) <b>juicer</b>. 

T " The mixture of apple juice and <u class= 
Wi. ( Jk) 

" 标注 下 划 线 "spelling">eldeflower</u> juice is very pleasant. 
Elderflower cordial, with one <mark>part</mark> 
cordial to ten <mark>part</mark>s water, stands 
a<mark>part</mark> from the rest. 

mark* 标记 或 者 高 亮 文 本 chrome 中 默认 会 以 黄 底 黑 字 显示 mark 元 素 : 
Elderflower cordial, with one part 
cordial to ten parts water, stands 
apart from the rest. 

ruby* rtp | 注音 标示 «ruby» OJ «rp» («rt»Orange Juice<rp>)</ruby> 

定义 文本 的 文本 方向 ， 使 其 脱离 其 
bdi 周围 文本 的 方向 设置 。 在 双向 x 本 The recommended restaurant is <bdi lang="">My 
j B " Juice Café (At The Beach)-/bdi». 
排版 中 使 用 
The proposal is to write English, but in reverse order. 
bdo 定义 文本 显示 的 方向 "Juice" would become "<bdo dir=rtl>Juice</bdo>" 
"Juice" would become "eciuJ" 
本 身 无 语义 ， 用 作 其 他 情况 下 的 文 F E 

oa 本 。 同 样 可 以 配合 class 等 属性 增加 In French we call it <span lang-"fr"»sirop de 

语义 ， 类 似 于 div 的 文本 级 版 本 | ean/span>， 

b 换行 Simply Orange Juice Company-br»Apopka, FL 

T 32703-br-U.S.A. 
规定 在 文本 中 的 何 处 适合 添加 换行 
符 。 如 果 单 词 太 长 ， 或 者 您 担心 浏 | www.simply<wbr>orange<wbr>juice.com 
wbr 览 器 会 在 错误 的 位 置换 行 ， 那 么 您 | www.simplyorange 
可 以 使 用 <wbr> 元 素来 添加 Word | juice.com 
Break Opportunity (单词 换行 时 机 》 
HS D 加 * 号 为 HIML 5 新 增 标签 。 
(2) 双向 文本 是 指 某 些 革 语言 和 ltr 语言 混用 的 场景 。 比 如 英文 与 希 伯 来 文字 混用 时 。 
1. 链接 
链接 可 能 是 我 们 写 HTML 用 得 最 多 的 场景 了 。a 元 素 是 用 来 定义 显 式 链接 的 利器 ， 相 


比 于 非 显 式 链 接 的 link 元 素 ，a 元 素 通常 会 出 现在 可 感知 内 容 (Palpable content) 里 面 。a 
一 般 会 带 有 href 属性 ， 当 a 元 素 带 有 href 时 ， 我 们 称 其 为 超 链接 Chyperlinks): 


<a href="/">Home</a> 
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如 果 没 有 指定 href 属性 ， 那 么 相应 的 target, download 和 rel 等 属性 也 不 能 出 现 ， 这 时 
候 这 个 a 元 素 代 表 了 一 个 链接 占 位 符 : 


<li><a>Examples</a></li> 


src 与 href 的 区 别 : 在 使 用 标签 时 很 多 人 会 搞 不 清 src 与 href 属性 的 使 用 ， 实 际 上 ， 只 
要 理解 这 两 个 属性 所 表示 的 本 意 就 很 容易 区 分 了 . href( hypertext reference ) 指 超 文本 引用 ， 
表示 当前 页 面 引用 了 别处 的 内 容 ; sre (source) 表示 来 源 地 址 ， 表 示 把 别处 内 容 引 入 (或 
RA) 到 当前 页 面 。 即 引用 和 引入 的 区 别 。 所 以 ，img、script 和 iframe 等 应 该 使 用 sre 来 
引入 内 容 ， 超 链接 则 只 是 引用 了 别处 内 容 。 

除了 a 标签 外 ，area 标签 也 可 以 创建 超 链接 。map 元 素 用 于 定义 图 像 映射 区 域 ，area 
则 用 于 定义 图 像 映射 内 部 的 区 域 ( 图 像 映射 指 的 是 带 有 可 单 击 区 域 的 图 片 )，area 只 能 出 现 
map 元 素 的 内 部 。area 的 coords 属性 用 于 指定 可 单 击 的 区 域 : 

<!-- usemap 属性 与 map 元 素 中 的 name 相关 联 ， 以 创建 图 像 与 映射 之 间 的 关系 --> 

<img src="planets.gif" alt="Planets" usemap ="#planetmap" /> 

<map name="planetmap"> 

<area shape -"rect" coords ="0,0,110,260" href -"sun.htm" alt-"Sun" /> 

<area shape -"circle" coords -"129,161,10" href -"mercur.htm" alt-"Mercury" 

UE 


Xarea shape -"circle" coords -"180,139,14" href -"venus.htm" alt-"Venus" /» 
«/map» 


运行 后 的 效果 如 图 2.18 所 示 。 


图 2.18 area 示例 


作为 链接 元 素 , 表示 链接 间 关 系 类 型 的 rel 自然 是 一 个 很 重要 的 属性 HTML 5 支持 多 
达 14 种 链接 类 型 (Link Types)， 每 一 种 链接 类 型 都 有 各 自 不 同 的 含义 。 前 文 在 讲解 link 
元 素 时 已 经 接触 到 一 些 链接 类 型 ， 对 于 全 部 链接 元 素 而 言 ， 这 14 种 类 型 的 rel 有 的 通用 ， 
有 的 则 只 对 部 分 元 素 有 效 ， 详 细 参 见 表 2-4 所 示 的 内 容 。 
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表 2-4 链接 类 型 
对 元 素 的 影响 
链接 类 型 | 《使 链接 变 为 什么 类 型 ) $ x 
link 元 素 | a 和 area 元 素 

altemative | 超 链接 超 链 接 相 较 于 当前 文档 可 替换 的 呈现 

author 超 链接 超 链接 链接 到 当前 文档 或 文章 的 作者 

bookmark | 不 可 用 超 链接 链接 最 近 的 父 级 区 块 的 永久 链接 (permalink) 

help 超 链接 超 链接 与 当前 上 下 文 相关 的 帮助 链接 

icon 外 部 资源 | 不 可 用 当前 文档 的 图 标 

license 超 链接 超 链接 当前 文档 的 许可 证 

next 超 链 接 超 链 接 后 一 篇 文档 

prev 超 链接 超 链 接 前 一 篇 文档 
当前 文档 的 原始 作者 不 推荐 超 链接 指向 的 文档 。 (如 不 可 信 

nofollow | 不 可 用 注解 赖 的 内 容 和 付费 链接 等 ， 搜 索引 擎 不 会 追踪 指定 了 nofollow 
的 链接 。) 

noreferer | 不 可 用 注解 访问 链接 时 不 发 送 referer 字段 

prefetch | 外 部 资源 | 外 部 资源 预 加 载 链 接 指向 的 页 面 

search 超 链 接 超 链 接 用 于 搜索 当前 文档 或 相关 文档 的 资源 

stylesheet | 外 部 资源 | 不 可 用 样式 表 

tag 不 可 用 超 链接 给 当前 文档 打上 标签 一 一 标签 由 链接 项 的 文档 所 指定 


当 rel 为 next 或 者 prev 时 ， 表 示 该 链接 指向 的 文档 相 较 于 当前 文档 是 “前 一 篇 ”还 是 
“后 a" 
<p> 
这 是 当前 文档 ， 
这 是 «a href-"prev.html" rel="prev"> 前 一 篇 文档 </a>， 
这 是 «a href-"next.html" rel="next"> 后 一 篇 文档 </a> 
</p> 
使 用 prev 和 next 属性 值 的 同时 也 指明 了 当前 文档 并 不 是 一 篇 完整 的 文档 ， 而 仅仅 是 
- 整 篇 文档 中 的 一 个 部 分 一 一 这 同样 意味 着 ， 如 果 你 的 文档 已 经 是 完整 的 了 ， 就 没 必要 再 
为 其 加 上 rel 为 prev 或 next 的 链接 。 
prev 和 next 在 某 些 场景 下 可 以 为 其 他 程序 所 利用 。 例 如 ，safari 新 增 的 阅读 列表 功能 
就 利用 了 prev 和 next 来 抓 取 前 后 的 文章 。 
prefetch 是 HTML 5 提供 的 一 个 非常 有 趣 而 且 实用 的 功能 ， 使 用 它 可 以 大 大 提升 网 站 
的 可 感知 速度 。 在 页 面 上 添加 一 行 : 


<link rel-"prefetch" href-"http://www.example.com/"» 

浏览 器 就 会 自动 预先 加 载 http://www.example.com/ 这 个 页 面 ， 这 样 用 户 在 真正 访问 这 
个 页 面 时 就 会 非常 迅猛 了 .。 当 你 有 一 篇 篇 幅 很 长 的 文章 需要 多 页 显示 时 , 再 配合 next 或 prev 
可 以 实现 前 后 页 面 导航 的 预 加 载 〈 没 错 ，rel 属性 的 值 可 以 指定 多 个 ， 用 空格 分 割 ): 

这 是 «a href-"prev.html" rel-"prev prefetch"> 前 一 篇 文档 </a>， 并 且 会 被 预 加 载 。 

prefetch 还 可 以 用 于 预 加 载 其 他 类 型 的 资源 ， 比 如 图 片 : 

Xlink rel-"prefetch" href-"/photos/rock-roll.png"» 
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对 于 chrome 而 言 ， 使 用 prerender JI TE HX prefetch: 


<link rel-"prerender prefetch" href-"http://example.org/index.html"» 


DEE: 提升 页 面 的 可 感知 速度 是 一 种 性 价 比 十 分 高 的 提升 网 站 性 能 的 方式 ， 具 体 做 法 包 
含 预 加 载 和 即时 响应 Ajax 等 。 


2. 数据 元 素 


data 元 素 是 HTML 5 中 的 新 成 员 ， 和 data-* 属 性 的 作用 类 似 ， 都 是 定义 数据 ， 不 过 这 
两 者 也 有 一 定 的 区 别 。data 元 素 主要 用 来 定义 机 器 可 读 的 数据 格式 ， 例 如 图 书 的 ISBN 和 
商品 的 条 码 等 数据 ， 而 data-* 主 要 用 来 定义 自 定义 数据 一 一 简单 的 说 ， 一 个 是 给 机 器 用 ， 
一 个 是 给 程序 员 用 : 


<table sortable> 

<thead> <tr> <th> Game <th> Corporations <th> Map Size 

<tbody> 
<tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93"> 
19+74 hexes (93 total)</data> 
«tr» «td» 1856 «td» «data value="11">Eleven</data> «td» «data value="99"> 
12487 hexes (99 total)«/data» 
<tr> «td» 1870 «td» «data value-"10"»Ten«/data» «td» «data value-"149"» 
44-145 hexes (149 total)«/data» 

«/table» 


data 元 素 的 value 值 是 必 选 的 属性 ， 机 器 程序 会 读 取 此 值 进行 数据 处 理 。 


AFE: 上 面 这 段 代 码 并 不 是 正确 的 XHTML 代码 ， 因 为 其 标签 没有 正确 闭合 ， 但 它 却 是 
正确 的 HTML 5 4X5, HTML 4.01 4I HTML 5 的 标准 中 下 列 标签 是 可 以 不 闭合 的 : 


<html> 
<body> 
<colgroup> 
<thead> 
Ere 
<tbody> 
<td> 

<p> 

<dt> 
<dd> 
<li> 
<option> 
<tfoot> 


从 此 例 也 能 看 出 HTML 5 在 代码 编写 上 有 很 大 的 自由 度 和 灵活 度 。 
time 元 素 可 以 理解 为 data 元 素 的 特例 ， 同 样 用 来 定义 机 器 可 读 的 数据 ， 只 不 过 只 能 赋 
予 其 时 间 相 关 的 值 : 


<time>2011-11-12</time> 


于 必须 让 机 器 可 读 , 因此 time 元 素 里 的 文本 或 者 其 datetime 属性 的 值 必须 是 预定 义 
的 格式 ， 这 样机 器 程序 才能 够 顺利 解析 : 


<time>14:54:39</time> 
<time>2012-12-12T14:54+0000</time> 
<time datetime="2005-10-01">7 年 前 的 国庆 节 </time> 
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名 注意: 时 间 格 式 全 部 可 用 格式 参见 : http://www.w3.org/html/wg/drafts/html/master/text- 
level-semantics.html#datetime-value. 


3. i. b、u 和 s 


TE HTML 5 之 前 , i、b、u 和 s 四 个 标签 的 含义 和 它们 的 样式 紧密 关联 ， 这 在 实践 中 是 
很 不 可 取 的 ， 因 此 很 多 时 候 你 会 看 到 各 种 教程 文档 中 都 不 建议 在 HTML 中 使 用 它们 。 可 事 
实情 况 是 , 这 些 和 表现 层 未 分 离 的 标签 满 世界 都 是 , 根本 没有 人 理 那 些 “ 最 佳 实践 ” HTML 
5 标准 的 制定 者 们 显然 看 到 了 这 一 现状 ， 他 们 选择 了 一 种 非常 聪明 的 方式 去 处 理 这 个 玉手 
的 问题 一 一 给 这 四 个 标签 附 上 相应 的 语义 和 建议 的 呈现 样式 。 

i 标签 相 比 于 HTML 4， 不 再 单纯 表示 斜体 〈italic)， 而 且 可 表示 “ 另 一 种 叙述 方式 ” 
CAlternative voice)。 常 见 应 用 场景 有 外 来 语 、 分 类 学 名 词 和 技术 术语 等 。 

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p> 

<p> 术 语 <i>HTML</i> 已 在 上 文中 定义 。</p> 

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p> 

b 和 i 一 样 ， 不 再 仅仅 表示 粗 体 (bold) 文本 ， 还 可 以 定义 一 些 需 要 引起 注意 但 是 却 没 
有 额外 语义 的 内 容 ， 比 如 摘要 中 的 关键 字 和 文章 导语 的 加 粗 等 等 。 

下 面 这 种 用 法 是 错误 的 : 

<p><b> 警 告 ! </b> 该 路 限 速 50 公里 。</p> 


因为 引入 了 额外 的 语义 ， 应 该 使 用 strong 才 对 。 
EE, u 也 不 再 仅仅 是 带 下 划 线 的 文本 ， 而 用 来 表示 显 式 呈 现 非 文本 的 标注 
(Annotations)， 典 型 的 比如 拼写 错误 和 中 文中 的 专 名 号 等 。 

拼写 错误 : 
<p>This is an <u>appple</u>.</p> 
专 名 号 : 
«dl» 

«dd» 

<u> 万 里 长 城 </u> 位 于 <u> 中 国 </u><u> 北 京 </u>。</dd> 

</dl> 


s 则 用 来 表示 有 误 文本 ， 常 见 的 使 用 场景 有 价格 变动 等 。 
QFE: 如 果 要 表示 文档 的 增删 改 记录 ， 则 应 该 使 用 ins 和 del 元 素 。 


4. ruby 


<ruby> 标 签 定义 注音 标示 ， 多 用 于 CJ 到 文字 ， 比 如 汉语 中 的 拼音 可 以 这 样 : 


<ruby> 
汉 
<rp> (</rp> 
<rt>hàn</rt> 
<rp>)</rp> 
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«rp» (</rp> 
«rt»yüc/rt» 
<rp>) </rp> 


<rp> (</rp> 
<rt>pin</rt> 
<rp>)</rp> 


<rp> (</rp> 

«rt»yin«/rt» 

<rp>) </rp> 
</ruby> 


在 Chrome 中 的 显示 效果 如 图 2.19 所 示 。 
hànyüpinyin 
汉语 拼音 
图 2.19 ruby 元 素 
ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 或 者 发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 
组 成 ， 除 此 之 外 ,还 包括 可 选 的 tp 元素， 定义 当 浏 览 器 不 支持 “ruby” 元 素 时 显示 的 内 容 ， 
这 样 在 不 支持 ruby 元 素 的 浏览 器 里 依然 能 得 到 较 好 的 显示 效果 ， 如 图 2.20 所 示 。 


汉 ({hen) 语 {yU) 拼 (pin) 音 {yin) 
图 2.20 降级 显示 


AFE: 所 谓 CIK 文字 (中 日 韩 统一 表意 文字 ) ， 即 指 Chinese (PX). Japanese (日 文 ) 
和 Korean (韩文 ) 文字 ， 当 然 也 包括 其 他 类 似 的 表意 的 象形 文字 ， 如 越南 文 。 


2.8.8 修改 记录 (edits) 


ins 和 del 俩 标签 表示 对 当前 文档 进行 的 修改 记录 增删)。 比 如 知 乎 网 的 问题 日 志 里 
面 便 用 到 ins 和 del: 


<p> 


现代 意义 上 的 婚姻 ， 没 有 那么 多 "圣洁 "的 东西 ， 说 白 了 就 是 法 律 对 于 一 种 社会 关系 的 保护 。 
<br> 
别人 <del> 行 的 就 是 夫妻 之 实 </del> <ins> 想 要 进入 这 种 社会 关系 </ins> 
， <del> 为 </del> <ins> 担 负责 任 和 义务 ， 有 </ins> 何 不 
<de1> 能 受 法律 保 护 。</del> 
<ins> 可 ? </ins> 如 果 你 要 说 "同性 恋 不 能 在 教堂 举行 婚礼 。".… 
</p> 


对 于 增删 标签 浏览 器 通常 有 默认 的 样式 ， 如 图 2.21 所 示 。 
ES 现代 意义 上 的 婚姻 ， 没 有 那么 多 “圣洁 ”的 东西 ， 说 白 了 


就 是 法 律 对 于 一 种 社会 关系 的 保护 。 
别人 行 的 就 是 夫妻 之 实 i 


BEES 
能 在 教堂 举 行 婚礼 。”.…… 


图 2.21 Chrome 默认 的 增删 样式 


A 


; 为 担负 责任 
mp? 如果 你 要 说 “同性 恋 不 
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不 过 建议 你 在 使 用 时 , 加 上 背景 色 , 这 样 对 于 修改 记录 可 以 一 目 了 然 , 如 图 2.22 所 示 。 


别人 行 的 就 是 夫妻 之 实 想 要 进入 这 种 社会 关系 ， 为 担负 责任 和 义务 ， 有 何不 能 受 法 律 保护 二 可 ? 


图 2.22 类 diff 的 增删 样式 


另外 ，ins 和 del 还 可 以 指定 datetime 属性 ， 用 以 表示 了 修改 发 生 的 时 间 ，cite 属性 用 
以 指向 对 某 个 修改 的 说 明 信 息 《〈 只 能 是 URL)。 


«aside» 

xr—— don't do this ==> 

«ins datetime-"2005-03-16 00:002z"» 
Xp» I like fruit. «/p» 
Apples are «em»tastyc«/em». 

«/ins» 

«ins datetime-"2007-12-19 00:002"> 
So are pears. 


«/ins» 
X/aside» 
AFE: datetime 属性 和 time 元 素 一 样 ， 要 遵循 相同 的 格式 规则 。 
前 文 我 们 提 到 ， 之 所 以 不 能 使 用 s TRER del 元 素 ， 除 了 标签 语义 这 个 很 重要 的 原 


因 以 外 ， 另 一 个 的 原因 是 ins 和 del 不 属于 文本 级 Ctext-leve) 的 元 素 ， 也 不 受到 文本 级 元 
素 的 某 些 制约 一 一 比如 要 遵循 一 定 的 嵌 套 条 件 。 这 意味 着 ins 和 del 里 面 可 以 出 现 几乎 任何 
元 素 诸 如 列表 和 段落 等 等 : 


<section> 
<ins> 
<p> 
This is a paragraph that was inserted. 
</p> 
This is another paragraph whose first sentence was inserted 
at the same time as the paragraph above. 
</ins> 
This is a second sentence, which was there all along. 
</section> 


2.3.9 BEAT (embedded content) 


由 于 HTML 本 身 提 供 的 元 素 的 表达 能 力 有 限 , 允许 嵌入 内 容 成 为 了 浏览 器 开发 者 们 不 
得 不 做 的 事情 ，HTML 可 以 嵌入 几乎 所 有 类 型 的 外 部 资源 ， 而 其 中 某 几 种 嵌入 资源 几乎 席 
卷 整 个 互联 网 。 排 在 首位 的 ， 自 然 是 图 像 一 一 没 错 ， 图 像 也 是 嵌入 资源 。 另 外 广为人知 的 
就 是 Flash、Java Applet fll iframe 等 资源 了 ，HTML 5 新 增 了 video 和 audio 相关 元 素 ， 骸 
入 音 视频 资源 不 用 再 依赖 其 他 插件 (如 Flash)， 使 得 Web 在 媒体 方面 的 能 力 大 大 提升 ， 浏 
览 器 原生 跨 平台 也 能 做 得 更 好 ， 而 canvas 的 加 入 则 让 整个 浏览 器 生动 起 来 ,“ 真 正 的 ”网 
页 游戏 也 在 逐渐 变 成 现实 。 接 下 来 我 们 细 数 一 下 这 些 嵌 入 内 容 元 素 。 


1. img 
我 相信 很 多 人 就 是 因为 这 个 元 素 而 开始 学 习 HTML 的 一 一 任何 言语 也 难以 形容 图 片 
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给 互联 网 带 来 了 怎样 的 繁荣 盛世 。HTML 5 进一步 完善 了 img 元 素 ， 并 为 其 提供 了 一 些 新 
特性 。 
在 HTML 4.01 中 ， 图像 的 align、border、hspace 以 及 vspace 这 四 个 和 图 片 样式 相关 的 
属性 不 赞成 使 用 。 而 在 HTML 5 中 ， 将 不 再 支持 这 些 属 性 。 
此 外 HTML 5 为 了 应 对 满 世界 的 视网膜 屏幕 ， 还 为 img 增加 了 srcset 属性 ， 它 允许 作 
者 指定 一 组 不 同 的 图 片 资源 ， 以 适 配 不 同 尺 寸 和 像素 密度 的 屏幕 
<h1><img alt-"The Breakfast Combo" 
src-"banner.jpeg" 
srcset-"banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone- 
HD.jpeg 100w 2x"»«/h1» 
srcset 的 值 由 一 组 逗号 分 割 的 值 组 成 , 每 个 值 又 由 一 个 图 片 的 wl 和 一 个 或 多 个 描述 符 
组 成 ,描述 符 是 形 如 100w、100h 和 2x 这 样 的 值 。100w 表示 “最 大 视 口 宽度 是 100 个 CSS 
像素 ”100h 和 100w 类 似 ， 不 过 表示 的 是 高 度 ，2x 表示 “每 一 个 CSS 像素 对 应 两 个 物理 
像素 的 最 大 像素 密度 ”。 当 浏览 器 检测 设备 的 屏幕 属性 匹配 srcset 指定 的 描述 符 时 ， 就 会 加 
载 对 应 的 图 像 。 


OFE: 更 多 关于 响应 式 设计 的 内 容 ， 请 参考 后 续 章节 。 


另外 ，img 还 增加 了 一 个 crossorigin 属性 ， 使 得 在 canvas 中 使 用 图 片 资源 时 可 以 突破 
跨 域 限制 。 
<img alt-"The plane" src-"http://www.other-site.com/res.jpeg" crossorigin- 


"anonymous"? 


AFE: 更 多 关于 CORS ( 跨 域 资 源 共享 ) 的 内 容 ， 请 参考 后 续 章节 。 
2. iframe 


iframe 为 创建 框架 式 网 页 获取 嵌入 外 部 网 页 提供 了 巨大 的 便利 。 从 最 初 TE. 中 的 私有 标 
签到 写 入 HTML 标准 ， 一 路 说 明了 其 流行 的 历史 ，HTML 5 继续 保留 了 这 一 标签 ， 并 增加 
了 几 个 新 的 属性 。 

iframe 曾 因 安全 问题 而 臭名 昭著 ， 这 主要 是 因为 iframe 常常 被 用 于 嵌入 第 三 方 内 容 ， 
而 第 三 方 内 容 则 可 能 会 执行 某 些 恶意 操作 。 达 ame 的 sandbox 属性 是 HTML 5 安全 性 方面 
重要 的 一 环 ， 它 为 页 面 的 iframe 增加 了 一 些 安全 限制 。sandbox 在 不 添加 sandbox 属性 时 : 


<iframe src-"http://alibaba.com" sandbox> 


将 会 启用 默认 全 部 的 安全 策略 :iframe 将 会 被 视 为 独立 的 源 ， 且 不 能 提交 表单 也 不 能 
执行 JavaScript， 无 法 控制 父 页 面 的 导航 行为 ， 插 件 也 不 能 被 启用 。 
如 果 你 想 要 修改 安全 策略 ， 可 以 在 sandbox 属性 中 使 用 几 个 预定 义 的 字符 串 。 
口 allow-same-origin: 允许 嵌入 内 容 访问 遵循 同 源 策略 的 资源 ， 如 本 地 存储 、cookie 
和 XHR 等 。 
O allow-top-navigation: 允许 嵌入 的 页 面 对 顶 层 页 面 进行 导航 。 
DP allow-forms: 允许 嵌入 内 容 提 交 表 单 。 
口 allow-scripts: 允许 嵌入 页 面 执行 脚本 代码 (但 不 能 新 弹出 窗口 )。 
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比如 下 面 这 个 例子 中 ，http://alibaba.com 这 个 页 面 可 以 将 顶层 页 面 导航 至 其 他 位 置 ， 
也 可 以 在 其 内 提交 表单 ; 

<iframe src-"http://alibaba.com" sandbox-"allow-top-navigation allow-forms"» 

seamless HJ DIE iframe 和 顶层 页 面 融 为 一 体 (去 掉 边 框 和 背景 色 等 )。srcdoc 属性 则 可 
以 指定 文档 中 的 内 容 : 

<iframe seamless srcdoc="<p> 我 是 框架 </p>"> </iframe> 

iframe 虽然 可 以 很 方便 地 创建 框架 ,但 由 于 很 耗费 资源 创建 一 个 框架 意味 着 要 创建 
一 个 完整 的 页 面 环 境 )， 因 此 如 果 可 以 不 使 用 过 ame， 那 么 就 尽量 不 要 使 用 ， 对 于 网 络 资源 
和 计算 资源 都 是 捉襟见肘 的 ， 移 动 设备 则 更 是 如 此 。 

3. embed 


embed 是 HTML 5 中 的 新 标签 ， 用 来 定义 嵌入 〈embed) 的 内 容 

<embed src-"helloworld.swf" /> 

可 以 通过 属性 的 方式 为 嵌入 内 容 传 入 参数 : 

<embed src-"helloworld.swf" quality="high" /> 

1 n] EUR UD: 

<embed type-"video/quicktime" src-"movie.mov" width-"640" height-"480"» 

此 时 将 调用 系统 的 quicktime 播放 器 播放 视频 。 

由 于 移动 设备 对 Flash 等 浏览 器 插件 支持 比较 差 ( 未 越狱 的 10S 设备 完全 不 支持 )， 因 
此 不 建议 使 用 Flash， 如 果 需 要 播放 音 视 频 ， 可 以 使 用 video 和 audio 来 调用 浏览 器 原生 的 
播放 器 。 


4. object 和 param 


比如 Flash 插件 : 


object 和 embed 类 似 ， 也 用 来 引入 嵌入 资源 ， 不 过 其 方式 和 embed 有 点 不 一 样 : 
<object data="move.swf" type="application/x-shockwave-flash"></object> 
object 添加 参数 的 方式 是 在 里 面 使 用 param 元 素 : 

<object data="move.swf" type="application/x-shockwave-flash"> 


<param name="foo" value="bar"> 
</object> 


AFE: HTML 5 中 已 经 废弃 了 大 部 分 object 的 属性 ， 如 果 可 以 请 尽量 使 用 embed 来 替代 
object。 


5. video 和 audio 


浏览 器 原生 支持 音 视频 无 疑 是 一 件 大 事 一 一 尤其 对 于 移动 设备 而 言 。 不 依赖 Flash, 意 
味 着 更 加 省 电 、 安 全 和 快速 的 播放 体验 ， 而 且 只 需要 引入 一 个 标签 ， 就 能 播放 自如 : 


<video src-"320x240.0gg" controls /> 


*6l* 


第 1 篇 HIML 5 移动 Web 开发 基础 


仅仅 一 行 代码 ， 就 可 以 实现 一 个 带 控件 〈controls 属性 ) 的 视频 播放 器 ， 如 图 2.23 
所 示 。 


图 2.23 video 元 素 


如 果 浏 览 器 不 支持 video 元 素 ， 你 可 以 在 video 标签 中 嵌入 提示 文字 来 实现 fallback: 
«video src-"320x240.0gg" controls» 
你 的 浏览 器 不 支持 <code>video</code> 元 素 ， 是 时 候 升级 了 ! 

</video> 

音频 播放 也 是 类 似 的 : 

<audio src-"/audio.ogg"» 

<p> 没 声音 ， 青 好 的 戏 也 出 不 来 。</p> 

</audio> 

指定 autoplay 属性 可 以 使 音频 或 者 视频 在 加 载 页 面 时 自动 播放 ，loop 属性 则 可 以 让 其 
循环 播放 : 

«video src="320x240.0gg" controls autoplay loop» 

poster 属性 可 以 为 视频 指定 一 张 海 报 〈 播 放 开始 前 会 显示 它 ): 

<video src-"320x240.0gg" controls autoplay loop poster-"life of pie.jpg"> 

对 于 较 大 的 文件 还 可 以 指定 preload 属性 进行 预 载 入 : 

«audio src-"4 S .mp3" preload-"auto" controls»«/audio» 


preload 可 以 从 三 个 值 中 指定 。 
O none: 不 缓冲 (buffer) 此 文件 。 
口 auto: 缓冲 整个 媒体 文件 。 
O metadata: 只 缓冲 部 分 元 数据 《比如 该 媒体 的 时 长 ) 。 
由 于 不 同 浏览 器 支持 的 文件 格式 不 同 ，HIML 5 提供 了 source 元 素 让 你 可 以 提供 多 种 
格式 编码 的 文件 以 兼容 这 些 浏览 器 : 

«video controls» 

<source src-"foo.ogg" type-"video/ogg"» 


<source src-"foo.mp4" type-"video/mp4"» 
<source src-"foo.webm " type-"video/webm"» 
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你 的 浏览 器 不 支持 <code>video</code> 元 素 ， 是 时 候 升 级 了 ! 
</video> 
上 面 的 代码 在 支持 ogg 格式 的 浏览 器 里 会 直接 播放 foo.ogg 文件 ， 如 果 不 支 持 ogg. DU 
览 器 会 依次 检测 mp4 和 webm 格式 的 支持 情况 。 要 注意 浏览 器 会 根据 type 里 的 MIME 值 
和 服务 器 最 终 返 回 的 值 来 判断 文件 是 否 可 以 播放 ，src 里 的 文件 扩展 名 并 不 是 判断 格式 的 
由 于 专利 许可 的 问题 ,浏览 器 在 video 和 audio 元 素 上 对 音 视频 编码 格式 尚 无 一 个 统一 
的 标准 ， 通 常 而 言 ， 你 只 需 提 供 如 下 几 种 媒体 格式 便 可 以 覆盖 主流 现代 浏览 器 。 
口 WebM: 由 Google 资助 的 开源 项 目 ， 浏 览 器 会 识别 video/webm 和 audio/webm 类 
型 的 媒体 文件 。 目 前 已 被 Gecko (FireFox) 、Chrome 和 Opera 原生 支持 ，IE 和 
Safari 需要 安装 相应 的 插件 。 
口 Ogg Theora Vorbis: 以 Ogg 为 容器 格式 并 以 Theora 视频 编码 器 或 Vorbis 音频 编码 
器 编码 的 媒体 文件 ， 建 议 优先 支持 WebM， 然 后 再 考虑 Ogg。 它 的 MIME Type 是 
audio/ogg. video/ogg 和 application/ogg, application/ogg 是 在 未 明确 指定 格式 是 音 
频 还 是 视频 时 可 以 使 用 。 
口 Ogg Opus: Ogg 容器 格式 也 可 以 封装 Opus 编码 的 文件 ， 目 前 仅 Firefox 15 以 上 的 
版 本 支持 。 
O MPEG H.264 (AAC 或 MP3) : MPEG 也 是 一 种 著名 的 容器 格式 ，H.264 视频 编码 、 
AAC/MP3 音频 编码 被 IE. Safari 和 Chrome 原生 支持 ， 可 惜 Chromium 和 Opera 
却 不 支持 。Firefox 将 会 在 近期 支持 ， 但 是 需要 第 三 方 解 码 器 。 
口 WAVE PCM: PCM 编码 的 WAVE 文件 。 


AFE: 虽然 Chromium 是 支撑 Chrome 的 开源 项 目 , 但 并 不 代表 Chromium 就 是 Chrome. 
你 甚至 可 以 在 video 8X audio 的 type 属性 里 指定 浏览 器 使 用 什么 解码 器 来 解码 文件 : 


«video controls» 
<source src-"flower.ogg" type-"video/ogg; codecs-dirac, speex"» 
你 的 浏览 器 不 支持 <code>video</code> 元 素 ， 是 时 候 升级 了 ! 


</video> 


除了 标签 本 身 提供 的 这 些 功 能 ， 还 可 以 使 用 JavaScript 更 加 细致 地 控制 媒体 文件 ， 比 
如 play 和 pause 方法 可 以 控制 媒体 的 播放 与 暂停 : 


var video = document.getElmentsByTagname ("video") [0] 
video.play() // 立刻 播放 视频 
// 两 秒 后 暂停 
setTimeout (function (){ 
video.pause() 
), 2000) 


甚至 你 可 以 写 一 个 简单 的 MP3 播放 器 ， 以 控制 播放 暂停 以 及 声音 大 小 : 


<audio id-"demo" src-"audio.mp3"»«/audio» 

«div» 
<button onclick-"document.getElementById('demo').play()"»Play the Audio 
X/button» 
<button onclick-"document.getElementById('demo').pause()"»Pause the 
Audio«/button» 
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<button onclick-"document.getElementById ('demo').volumet-0.1"»Increase 
Volume«/button» 
<button onclick-"document.getElementById ('demo').volume--0.1"»Decrease 
Volume«/button» 

«/div» 


HTML 5 提供 了 暂停 接口 却 并 没有 提供 停止 接口 ， 而 且 即 便 是 暂停 后 浏览 器 依然 会 继 


续 下 载 媒体 文件 ， 如 果 想 提供 停止 功能 ， 简 单 的 做 法 是 将 sre 置 为 空 : 


示 


var mediaElement = document.getElementById ("mediaElementID"); 
mediaElement.pause(); 
mediaElement.src — ""; 


媒体 元 素 Cvideo&audio) 本 身 还 提供 了 非常 强大 的 控制 功能 , 你 可 以 控制 播放 的 进度 : 


var mediaElement = document.getElementById('mediaElementID'); 


mediaElement.seekable.start (0); // 返 回 开 始 时 间 (单位 为 秒 ， 通 常 都 会 返回 0) 


mediaElement.seekable.end(0); // 返 回 结束 时 间 ， 通 常 是 媒体 文件 的 时 长 
mediaElement.currentTime; // 返 回 当前 播放 到 多 少时 间 
mediaElement.currentTime = 122; // 跳 转 到 第 122 秒 
mediaElement.played.end(0); // 返 回 浏览 器 已 经 播放 了 多 长 的 时 间 
mediaElement.buffered.end(0); // 返 回 浏览 器 已 经 缓冲 了 多 长 的 时 间 
mediaElement.muted = true; Lei 

mediaElement.volume = 1; // 将 音量 调 至 最 大 


媒体 元 素 上 的 seekable、played 和 buffered 属性 都 是 一 个 TimeRanges 类 型 的 对 象 ， 表 


-个 时 间 范 围 ， 可 以 通过 访问 它 的 start 和 end 方法 来 确定 开始 和 结束 时 间 。currentTime 


表示 当前 时 间 ， 它 是 可 读 可 写 的 值 。 一 个 媒体 的 开始 时 间 和 结束 时 间 通 常 是 固定 的 ， 但 是 
你 也 可 以 通过 hash mark GH 的 方式 来 设置 ， 语 法 是 : 


dt-[starttime][,endtime] 

如 你 只 想 播放 某 视频 的 第 10 到 20 秒 ， 则 可 以 : 

«video src="video.ogg#t=10,20" autoplay> 
这 样 视频 将 自动 从 第 10 秒 开始 播放 ， 并 在 20 秒 时 停止 。 
时 间 的 设置 也 可 以 是 用 冒号 分 割 的 形式 ， 诸 如 1:04:00: 


<video src="video.ogg#t=1:04:00" autoplay> 


对 于 不 支持 video 的 浏览 器 ， 也 可 以 使 用 Flash 作为 降级 策略 : 


«video src-"video.ogg" controls» 
<object data-"flvplayer.swf" type-"application/x-shockwave-flash"» 
Xparam value-"flvplayer.swf" name-"movie"/» 
</object> 
</video> 


AE: 在 Android X iOS 设备 上 ，HTML 5 视频 元 素 将 会 调用 设备 内 置 的 播放 器 来 播放 


音 视 频 ， 定 制 的 播放 器 外 观 将 失去 效用 。 


6. canvas 


canvas 标签 表示 一 块 画布 。 作 为 HTML 5 中 最 重要 的 元 素 之 一 ，canvas 承担 了 非常 多 


第 2 章 HTML 5 基础 


的 工作 : 整个 HTML 5 游戏 都 将 以 canvas 为 基石 ， 无 论 是 3D 还 是 2D， 透 过 canvas 我 们 
还 可 以 为 传统 网 页 增加 许多 很 炫 的 效果 ， 制 作 动态 图 表 ， 甚 至 是 开发 类 似 PhotoShop. 
CorelDraw 这 样 的 图 形 处 理 或 者 绘图 软件 。 

canvas 元 素 涵盖 的 内 容 广 而 且 深 , 本 书 将 不 做 过 多 的 讲解 .本 小 节 将 修改 一 个 来 自 what 
工作 组 HTML 5 官方 标准 文档 中 的 例子 ， 通 过 该 例子 来 简单 介绍 canvas 2D API 的 基本 使 
用 ， 这 个 例子 将 绘制 一 些 彩色 随机 渐 隐 的 曲线 : 


<!DOCTYPE html» 
«html» 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
<canvas width="800" height="450"></canvas> 
<script> 
// 调用 canvas 元 素 的 getContext('2d') 方法 获取 绘图 上 下 文 
var context = document.getElementsByTagName ('canvas') [0] .getContext ('2d') ; 


var lastX - context.canvas.width * Math.random(); 
var lastY - E ad LS * Math.random(); 
var hue - 
D E aE : 制 一 条 曲线 
function line() { 
// save() 方法 把 当前 状态 的 一 份 复制 压 入 到 一 个 保存 图 像 状态 的 栈 中 
// 这 就 允许 您 临时 地 改变 图 像 状态 ， 然 后 ， 通 过 调用 restore 0 来 恢复 以 前 的 值 
context.save(); 
// translate() 方法 重新 映射 画布 上 的 远 点 坐标 (0, 0) 位 置 
// 此 例 中 将 原点 从 canvas 的 左上 角 移 动 到 了 中 心 
context.translate(context.canvas.width / 2, context.canvas.height / 2); 
// scale() 方法 缩放 当前 绘图 ， 更 大 或 更 小 
context.scale(0.9, 0.9); 
context.translate(-context.canvas.width / 2, -context.canvas.height / 2); 
// beginPath() 方法 开始 一 条 路 径 ， 或 重 置 当前 的 路 径 
// 配合 使 用 moveTo ()、lineTo () .quadricCurveTo ().bezierCurveTo ().arcTo() 
以 及 arc () 这 些 方法 来 创建 路 径 
context.beginPath(); 
// lineWidth 属性 设置 或 返回 当前 线条 的 宽度 ， 以 像素 计 
context.lineWidth = 5 + Math.random() * 10; 
// moveTo () 将 以 相对 于 圆 点 左边 (lastX， lastY) 的 位 置 移动 当前 画笔 笔触 
context.moveTo(lastX, lastY); 
lastX = context.canvas.width * Math.random(); 
lastY = context.canvas.height * Math.random(); 
// bezierCurveTo() 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 塞 尔 曲线 
// 语法 是 : bezierCurveTo (cpPX1，cpY1，cpX2，cpY2，x，Y) 
// 这 条 曲线 的 开始 点 是 画布 的 当前 点 ， 而 结束 点 是 (x, y) 
// 两 条 贝 塞 尔 曲线 控制 点 (cpxi, cpY1) 和 (cpX2, cpY2) 定义 了 曲线 的 形状 
// 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x，Y) 
Vi 
context.bezierCurveTo( 
context.canvas.width * Math.random(), context.canvas.height * Math. 
random(), 
context.canvas.width * Math.random(), context.canvas.height * Math. 
random(), 
lastX, lastY); 
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// 选取 一 个 随机 色调 (hue) 
hue = hue + 10 * Math.random(); 


// strokeStyle 属性 设置 或 返回 用 于 绘图 笔触 的 颜色 、 渐 变 或 模式 


// 此 处 使 用 hsi 格式 将 笔触 设置 为 一 个 饱和 度 和 亮度 都 为 50s 的 随机 颜色 
context.strokeStyle = 'hsl(' + hue + ', 50$, 502)'; 

/ 给 笔触 加 上 阴影 和 高 斯 模糊 ， 实 现 光 晕 的 效果 
context.shadowColor = 'white'; 

WM shadowBlur - 10; 


/ 绘制 整 条 路 径 
全 这 stroke(); 


// 恢复 绘图 上 下 文 


context.restore(); 


) 

// 每 隔 五 十 毫秒 绘制 一 条 线 

e 50); 
/ 绘制 背景 

人 background() { 
// 填充 样式 设置 为 半 透 明 黑 色 
context.fillStyle = 'rgba(0,0,0,0.1)'; 
// 填充 整个 画布 


context.fillRect(0, 0, context.canvas.width, context.canvas.height); 


7 每 隔 四 十 毫秒 以 半 透 明 的 笔触 重 绘 整个 画布 ， 这 样 可 以 实现 已 绘制 的 线条 渐 隐 的 效果 
setInterval(background, 40); 
</script> 

</body> 

</html> 


最 终 效果 非常 漂亮 ， 如 图 2.24 所 示 。 


图 2.24 动态 曲线 效果 


7. MathML 


math 元 素 并 不 是 标准 的 HTML 元 素 ， 它 来 自 MathML pae 空间 ， 属于 HTML ik 
入 的 扩展 ， 主 要 用 来 表达 数学 领域 里 的 公式 、 方 程 和 算式 等 。 下 面 是 一 个 简单 的 公式 例子 


<!DOCTYPE html» 
<html> 
<head> 
<title>The quadratic formula</title> 
</head> 
<body> 
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<hl>The quadratic formula</h1> 
<p> 
<math> 
<mi>x</mi> 
<mo>=</mo> 
<mfrac> 
<mrow> 
«mo form="prefix">-</mo> <mi>b</mi> 
<mo>+</mo> 
<msqrt> 
<msup> <mi>b</mi> <mn>2</mn> </msup> 
«mo»-«/mo» 
«mn»4«/mn» <mo>D</mo> «mi»a«/mi» <mo>D</mo> «mi»c«/mi» 
«/msqrt» 
</mrow> 
<mrow> 
<mn>2</mn> <mo>D</mo> <mi>a</mi> 
</mrow> 
</mfrac> 
</math> 
</p> 
</body> 
</html> 


最 终 在 safari 下 的 泻 染 效果 如 图 2.25 所 示 。 
The quadratic formula 
MESS 


2a 
图 2.25 math 元 素 


由 于 math. 元 素 各 大 浏览 器 支持 还 不 够 好 ， 对 于 代码 编写 者 而 言 也 不 够 友好 ， MIT 
数学 方面 的 需求 建议 使 用 Latex SENS N 式 的 目标 源码 ， 使 用 开源 项 目 MathJax 来 
终结 果 ， 它 能 兼容 主流 的 各 大 浏览 


和 注意: http://www.mathjax.org/. 


8. SVG 


和 math 一 样 ，svg 元 素 也 不 是 标准 的 HTML 7625. SVG 是 使 用 XML 来 描述 二 维 图 形 
和 绘图 程序 的 语言 。SVG 可 以 单独 编写 也 可 以 嵌入 HTML 中 使 用 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
<svg width="100%" height-"100$" version-"1.1" xmlns="http://www.w3.org/ 
2000/svg"> 
Xcircle cx-"100" cy-"50" r-"40" stroke-"black" stroke-width-"2" 
fill-"red"/» 
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«/svg» 
</body> 
</html> 


最 终 效 果 泻 染 效果 如 图 2.26 所 示 。 


图 2.26 svg 示例 


AE: MathML 和 SVG 均 不 属于 本 书 的 讲解 范畴 ， 读 者 有 需要 可 以 自行 阅读 其 他 资料 。 


2.3.10 ”表格 数据 (tabular data) 


表格 是 用 来 表示 二 维 数据 的 绝 佳 工具 ， 不 过 正确 使 用 table 也 不 是 一 件 易 事 儿 。 表 2-5 
列 出 了 表格 元 素 的 一 些 基本 用 法 。 


表 2-5 表格 元 素 的 用 法 


元 X 用 Ê 
table 定义 表格 
caption 定义 表格 标题 ， 通 常会 出 现在 表格 的 项 部 


对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 比 如 
colgroup | <colgroup span="2" style="background-color:red" /> 

选中 了 表格 的 前 两 列 并 将 背景 色 改 为 红色 

表示 列 ， 和 colgroup 的 作用 类 似 : 

<colgroup> 

«col class="vzebra-odd"> 
cul «col class-"vzebra-even" 
«col class-"vzebra-odd"^ 
«col class-"vzebra-even"^ 

</colgroup> 
分 别 为 奇数 列 和 偶数 列 应 用 不 同 的 样式 
定义 一 段 表格 主体 ， 一 个 表格 可 以 有 多 个 主体 ， 类 似 于 colgroup 标签 ，tbody 可 以 将 表格 
按照 行 来 分 组 
thead 定义 表格 表 头 ， 通 常 表现 为 标题 行 
定义 表格 的 脚注 (页 脚 ) ， 通 常 表现 为 总 计 行 。 
thead、tfoot 以 及 tbody 元 素 使 你 有 能 力 对 表格 中 的 行进 行 分 组 。 这 种 划分 使 浏览 器 有 能 
力 支 持 独立 于 表格 标题 和 页 脚 的 表格 正文 滚动 。 当 长 的 表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 
可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 
[3 定义 表格 中 的 行 
td 定义 表格 中 的 单元 格 
也 定义 表格 表 头 中 的 单元 格 


下 面 来 看 几 个 例子 ， 以 熟悉 如 何 使 用 table. 
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例子 1， 数 独 游戏 : 


<section> 
<style scoped> 
table { border-collapse: collapse; border: solid thick; } 
colgroup, tbody { border: solid medium; } 
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; 
padding: 0; } 
</style> 
<table> 
<caption>Today's Sudoku</caption> 
«colgroup»«col»«col»«col» 
«colgroup»«col»«col»«col» 
«colgroup»«col»«col»«col» 
<tbody> 
«tr» «td» 1 «td» «td» 3 «td» 6 «td» «td» 4 «td» 7 «td» «td» 9 
«tr» «td» <td> 2 «td» «td» «td» 9 «td» «td» «td» 1 «td» 
<tr> <td> 7 <td> «td» «td» «td» «td» «td» «td» «td» 6 
<tbody> 
<tr> <td> 2 <td> <td> 4 <td> <td> 3 <td> <td> 9 <td> <td> 8 
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td> 
<tr> <td> 5 <td> <td> <td> 9 <td> <td> 7 <td> <td> <td> 1 
<tbody> 
<tr> <td> 6 <td> <td> <td> <td> 5 <td> <td> std = <td> 2 
«tr» «td» «td» «td» «td» «td» 7 «td» «td» «td» «td» 
«tr» «td» 9 «td» «td» «td» 8 «td» «td» 2 «td» «td» «td» 5 
</table> 
</section> 


这 个 表格 定义 了 一 个 9X9 的 表格 ，colgroup 和 col 将 整个 表格 按 列 分 成 了 三 组 , tbody 
则 将 其 按 行 分 成 了 三 组 ， 并 分 别 对 colgroup 和 tbody 应 用 样式 。caption 定义 了 其 标题 ， 最 
终 的 显示 效果 如 图 2.27 所 示 。 


Today's Sudoku 


图 2.27 表格 的 应 用 一 数 独 


例子 2， 展示 表格 : 


<table> 
<caption>Specification values: <b>Steel</b>, <b>Castings</b>, 
Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption> 
<thead> 
<tr> 
<th rowspan=2>Grade.</th> 
<th rowspan=2>Yield Point.</th> 
<th colspan=2>Ultimate tensile strength</th> 
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«th rowspan-2»Per cent elong. 50.8mm or 2 in.«/th» 
«th rowspan-2»Per cent reduct. area.«/th» 

«/tr» 

«tr» 
«th»kg/mm«sup?2«/sup»«/th» 
«th»lb/in«sup»2«/sup»«/th» 

</tr> 

</thead> 
<tbody> 

<tr> 
<td>Hard</td> 
<td>0.45 ultimate</td> 
<td>56.2</td> 
<td>80, 000</td> 
<td>15</td> 
<td>20</td> 

</tr> 

«tr» 

«td»Mediumc/td» 
«td»0.45 ultimate«/td» 
«td»49.2«/td» 
«td»70,000«/td» 
«td»18«/td» 
«td»25«/td» 

«/tr» 

«tr» 

«td»Soft«/td» 
«td»0.45 ultimate«/td» 
«td»42.2«/td» 
«td»60,000«/td» 
«td»22«/td» 
«td»30«/td» 
</tr> 

</tbody> 

</table> 


表格 使 用 了 thead 定义 表 头 ， 并 使 用 了 rowspan 和 colspan 来 合并 行 和 列 ， 最 终 的 效果 
如 图 2.28 所 示 。 


Specification values: Steel, Castings, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 


0.05. 

Ultimate tensile strength | Per cent | per cent 

Grade. Yield Point. e reduct. 
kg/mm? lb/in* pini in. area. 
Hard 0.4.5 ultimate 56.2 80,000 15 20 
Medium 0.4.5 ultimate 49.2 70,000 18 25 
Soft 0.4.5 ultimate 42.2 60,000 22 30 

图 2.28 合并 单元 格 


例子 3， 数 据 统计 : 


«table» 
<thead> 
<tr> 
<th> 
<th>2008 
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<th>2007 
<th>2006 
<tbody> 
<tr> 
<th>Net sales 
<td>$ 32,479 
<td>$ 24,006 
std»$ 19,315 
«tr» 
«th»Cost of sales 
«td» 21,334 
«td» 15,852 
«td» 13,717 
<tbody> 
<tr> 
<th>Gross margin 
<td>$ 11,145 
<td>$ 8,154 
<td> 5,598 


<tfoot> 
<tr> 
<th>Gross margin percentage 
<td>34.3% 
<td>34.0% 
<td>29.0% 
</table> 
在 数据 统计 的 表格 里 使 用 tfoot 时 ， 通 常 将 其 作为 统计 行 ， 最 终 的 效果 如 图 2.29 所 示 。 
2008 2007 2006 
Net sales $32,479  $24006 $19,315 
Cost of sales 21,334 15,852 13,717 
Gross margin $11,145 $ 8,154 $ 5,598 
Gross margin percentage 34.3% 34.0% 29.0% 


图 2.29 数据 统计 表格 


2.3.11 HTML 5 表单 


表单 作为 网 页 与 用 户 之 间 最 重要 的 交互 工具 已 经 存在 很 长 一 段 时 间 了 ， 虽 然 表 单 为 获 
取 用 户 输入 提供 了 巨大 的 便利 ， 但 同时 也 暴露 出 很 多 的 问题 。 首 当 其 冲 的 就 是 数据 验证 的 
问题 了 。 

想象 某 个 用 户 在 填写 了 一 大 堆 的 表单 数据 后 单 击 “ 提 交 ” 按 钮 ， 结 果 服 务 器 却 告诉 他 
说 Email 的 格式 不 正确 ， 瞬 间 导 致 其 他 表单 项 都 白 填 了 一 一 这 是 多 么 让 人 抓 狂 的 事情 ， 还 
好 我 们 有 JavaScript 可 以 稍微 地 缓解 这 一 问题 。 利 用 Form 相关 的 DOM 接口 ， 可 以 用 
JavaScript 在 提交 数据 到 服务 器 之 前 进行 数据 格式 的 验证 。 例 如 下 面 这 个 表单 页 面 : 


<!DOCTYPE HTML> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 测 试 表单 </title> 

</head> 

<body> 
«form id-"userinfo" action="/url/to/server"> 
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告诉 我 你 的 用 户 信息 吧 ， 亲 ~ 
<br> 
<label> 
Email: 
<input name="email" type="text" ></label> 
<br> 
<label> 
电话 : 
<input name-"phone" type="text" »«/label» 
<br> 
<input type="submit" value=" 提 交 "></form> 
</body> 
</html> 


这 个 页 面 的 表单 包含 了 两 个 字段 ， 我 们 如 果 希 望 这 两 个 字段 对 用 户 来 讲 都 是 必 填 项 ， 
而 且 要 保证 格式 正确 ， 我 们 可 能 会 加 上 这 样 一 段 代码 : 


<!DOCTYPE HTML> 
<html lang="en-US"> 
<script type="text/javascript"> 
// 在 提交 表单 前 检测 
document.getElementById('userinfo').onsubmit = function (e) ( 
var shouldSubmit = true 
// 提交 表单 时 获取 表单 字段 的 值 
var email this.elements.namedItem('email').value.trim() 
var phone this.elements.namedItem('phone').value.trim() 


// 我 们 要 确保 每 个 字段 用 户 都 必须 填写 非 空白 值 
if ( email === '' ) ( 
alert('Email 是 必 填 项 ! ') 
shouldSubmit = false 
) 
if ( phone = Bot 
alert (' 电 话 是 必 填 项 ! ') 
shouldSubmit = false 


) 

// 必须 保证 表单 值 的 格式 正确 

// email 必须 是 xx@xx 的 形式 

if ( !/\w+@\w/.test (email)) { 
alert ('Email 格式 不 正确 ! ') 
shouldSubmit = false 


) 

// phone 必须 是 数字 

if ( !/\d+/.test (phone)) ( 
alert (' 电 话 格式 不 正确 ') 
shouldSubmit = false 

) 


if(!shouldSubmit) ( 
// 阻止 表单 默认 的 提交 事件 
e.preventDefault () 
} 
b 
</script> 
</body> 
</html> 
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虽然 完成 了 任务 ， 但 是 却 多 了 一 大 堆 代码 ， 和 警告 框 的 提醒 方式 对 用 户 也 不 是 很 友好 ， 
更 可 怕 的 是 , 如 果 用 户 在 浏览 器 上 禁用 了 JavaScript, 那么 我 们 的 验证 功能 就 完全 失去 功效 
了 。 还 好 我 们 有 HTML 5。 

表单 可 能 是 HTML 5 各 种 特性 中 最 令 广 大 开发 者 振奋 的 部 分 之 一 了 ， 增 加 了 数 种 类 型 
的 输入 框 ， 以 及 更 加 丰富 的 属性 ， 以 前 要 写 一 大 堆 JavaScript， 引 入 一 堆 库 或 者 插件 才能 实 
现 的 功能 ， 现 在 都 交 由 浏览 器 来 帮 你 做 了 ， 你 只 需要 写 几 行 HTML 代码 便 可 搞定 。 比 如 上 
面 的 例子 ， 只 需要 修改 其 中 两 行 代码 ， 并 且 不 费 一行 JS 代码 ， 便 可 以 实现 相同 的 功能 : 

<body> 


<form id="userinfo" action="/url/to/server"> 
告诉 我 你 的 用 户 信息 吧 ， 亲 ~ 
<br> 
«label» 
Email: 
<input required name-"email" type-"email" ></label> 
<br> 
<label> 
电话 : 
<input required name-"phone" type-"number" »«/label» 
<br> 
<input type="submit" value=" 提 交 "></form> 
</body> 


required 属性 是 一 个 bool 值 ， 表 示 该 字段 必须 要 填写 ， 否 则 表单 无 法 提交 。 浏 览 器 自 
己 实 现 的 验证 提示 体验 也 会 很 友善 ， 比 如 在 桌面 Chrome 下 ， 效 果 如 图 2.30 所 示 。 
桌面 Firefox 下 ， 如 图 2.31 所 示 。 


告诉 我 你 的 用 户 信息 吧 ， 亲 ~ 


告诉 我 你 的 用 户 信息 吧 ， 亲 ~ pim filod33Ggmail.com 
Email: filod@xx | 电话 | | 


ii 3] 
| 提交 


| H 请 与 所 请 求 的 格式 保持 一 致 


图 2.30 Chrome 的 表单 提示 图 2.31 FireFox 的 表单 提示 


在 Opera 下 ， 提 示 的 弹出 层 甚至 还 有 一 个 “摇晃 ”的 动画 效果 ， 如 图 2.32 所 示 。 


图 2.32 Opera 的 表单 提示 


选择 不 同 的 浏览 器 意味 着 用 户 不 同 的 口味 ， 不 费 多 一 行 的 代码 就 能 迎合 所 有 用 户 的 口 
味 ， 这 是 多 么 功 在 千秋 的 一 件 事 儿 啊 ， 不 过 HTML 5 表单 的 威力 可 远 不 止 此 ， 下 面 让 我 们 
细 细 道 来 。 
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2.3.12 input 元 素 和 其 属性 


input 元 素 是 表单 中 最 核心 的 元 素 ， 用 于 响应 和 验证 用 户 的 输入 。HTML 5 为 input 元 
素 新 增 了 多 种 类 型 , 用 以 接受 各 种 类 型 的 用 户 输入 , 它们 是 email, tel (电话 )、url、 serach, 
color, number, range 和 date 等 。 这 些 类 型 的 input 会 在 浏览 器 中 呈现 出 不 同 的 形态 ， 以 方 
便 用 户 输入 。 


<input type-email» 


email 可 能 是 最 常见 的 用 户 输入 类 型 了 , 登录 账号 、 订 阅 地 址 和 找 回 密码 等 各 种 场合 都 
会 用 到 它 ， 在 HTML 5 中 成 为 input 首要 新 类 型 也 是 很 自然 的 事 儿 。email 类 型 会 自动 验证 
用 户 输入 的 内 容 格式 是 不 是 email, 并 给 出 响应 的 提示 。 而 在 移动 设备 上 , 浏览 器 也 可 以 针 
对 email 类 型 做 优化 ,比如 在 iOS 设备 上 , 类 型 为 email 的 输入 框 在 获取 用 户 输入 时 弹出 的 
虚拟 键盘 也 会 有 所 不 同 ， 比 如 前 文 的 例子 如 果 是 在 iPhone 上 访问 。 

可 以 从 图 2.33 中 看 到 键盘 变 成 了 输入 email 更 方便 的 形式 (多 了 @ 和 .符号 )。 

另外 ，email 类 型 (包括 其 他 text 相关 类 型 ) 还 支持 autocomplete 属性 以 实现 自动 完成 
功能 ( 某 次 输入 提交 后 ， 下 次 再 遇 到 同样 的 表单 浏览 器 将 会 自动 提示 上 次 的 输入 ): 


<input type="email" autocomplete="on"> 


placeholder 属性 也 是 十 分 有 用 的 属性 ， 用 来 实现 文本 框 占 位 符 〈 同 样 支持 所 有 text 相 
关 类 型 ): 

<input type-"email" placeholder=" 在 这 里 输入 邮件 "> 

<input type="text" placeholder=" 在 这 里 输入 用 户 名 "> 


<input type="password" placeholder=" 在 这 里 输入 密码 "> 
<input type-"search" placeholder=" 搜 索 你 想 要 的 "> 


运行 效果 如 图 2.34 所 示 。 


咱 告 诉 我 你 的 用 户 信 
Email: (rao | 
Ri: 


pnra a me 
io[w[e [n] v] viu] [ofe] 
DEDBGGODGS 
"anas 
HI) CES EENI 


图 2.33 email 类 型 的 input 图 2.34 placeholder (Chrome) 
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对 于 不 支持 placeholder 的 浏览 器 (如 下 8-)， 你 可 以 使 用 一 些 polyfill 插件 。 例 如 ， 
jquery-placeholder (https://github.com/mathiasbynens/jquery-placeholder), 其 实现 的 基本 原理 
是 检测 是 否 原生 支持 placeholder 属性 ， 如 果 不 支持 ,， 则 取出 响应 元 素 placeholder 的 内 容 新 
建 一 个 标签 并 绝对 定位 到 input 或 者 textarea 所 在 的 位 置 。 

如 果 你 需要 进行 额外 的 数据 验证 ， 还 可 以 使 用 pattem 属性 : 

<!-- fX zhihu.com 结尾 的 邮箱 可 以 通过 验证 --> 


<input type-"email" pattern-"WNw*zhihu.com" > 

pattern 属性 的 值 是 一 个 正则 表达 式 , 如 果 用 户 的 输入 匹配 正则 成 功 则 该 字段 能 够 提交 。 

<input type=number> 

number 类 型 只 能 接受 用 户 输入 数字 , Chrome 下 此 种 类 型 的 input 的 旁边 会 多 出 两 个 调 
整数 字 大 小 的 按钮 ， 如 图 2.35 所 示 。 

在 iPhone 上 其 键盘 也 会 有 相应 的 变化 ， 如 图 2.36 所 示 。 

如 果 你 要 在 JavaScript 里 面 取得 表单 的 数字 ， 可 以 直接 访问 valueAsNumber 来 得 到 
Number 对 象 : 

typeof document.getElementById('id-of-input').valueAsNumber //number 

如 果 你 要 限制 输入 数字 的 最 大 值 或 最 小 值 ， 还 可 以 通过 min 和 max 属性 来 设置 : 

<input type=number min=10 max=100> 

小 数 同样 可 以 : 

<input type=number min=10.1> 

运行 后 的 效果 如 图 2.37 所 示 。 

ER 


type-number: 


ao — 5] (a 


B 值 必 须 大 于 或 等 于 10.1. 


gomm 


图 2.35 number 类 型 图 2.36 type-number 图 2.37 min&max 属性 


通过 设置 step 属性 ， 还 可 以 设置 那 两 个 小 按钮 在 调整 数字 时 的 步 长 : 


<input type=number step=2> 
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1. <input type=tel> 


和 number 相 类 似 的 是 tel KW, tel 类 型 用 于 输入 电话 号 码 ， 这 在 手机 上 尤为 有 用 ， 键 
盘 会 直接 变 成 拨号 键盘 ， 如 图 2.38 所 示 。 


2. «input type=url> 


ur] 也 是 很 常见 的 输入 类 型 ，iOS 的 虚拟 键盘 会 出 现 “.com” 和 “\” 等 快捷 输入 按键 ， 
如 图 2.39 所 示 。 


alwlelalrlvlulUolP 
Alsjpjrjlslnlujk 


S HBBBBDBUOU 


图 2.38 tel 类 型 的 input 


使 用 list 属性， 配合 datalist 元 素 ，url 类 型 的 input 可 以 方便 地 实现 自动 提示 功能 (这 
个 功能 同样 适用 于 email 和 search 等 文本 输入 框 ): 


<input type-"url" name-"location" list-"urls"» 

Xdatalist id-"urls"» 
Xoption label-"MIME: Format of Internet Message Bodies" 
value-"http://tools.ietf.org/html/rfc2045"» 
Xoption label-"HTML 4.01 Specification" value-"http://www.w3.org/TR/ 
html14/"» 
Xoption label-"Form Controls" 
value-"http://www.w3.org/TR/xforms/slice8.html£ui-commonelems-hint"» 
Xoption label-"Scalable Vector Graphics (SVG) 1.1 Specification" 
value-"http://www.w3.org/TR/SVG/"» 
Xoption label-"Feature Sets - SVG 1.1 - 20030114" 
value-"http://www.w3.org/TR/SVG/feature.html"» 
<option label-"The Single UNIX Specification, Version 3" 
value-"http://www.unix-systems.org/version3/"» 

«/datalist» 


最 后 的 效果 如 图 2.40 所 示 。 


http://tools.ietf.org/html/rfc2045 MIME: Format of Internet Message Bodies 
http: / /www.w3.org/TR/html4/ HTML 4.01 Specification 
http: //www.w3.org/TR/xforms/slice8.htmlstui-commonelems-hint Form Controls 
http://www.w3.org/TR/SVG/ Scalable Vector Graphics (SVG) 1.1 Specification 
http: / /www.w3.org/TR/SVG/feature.html Feature Sets - SVG 1.1 - 20030114 
http: / /www.unix-systems.org/version3/ The Single UNIX Specification, Version 3 


图 2.40 配合 datalist 实现 自动 完成 
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全 注意 : 目前 再 依赖 浏览 器 验证 url 方面 不 是 很 可 靠 ， 比 如 省 略 http 协议 的 url 在 Chrome 
里 就 无 法 通过 验证 ， 如 图 2.41 所 示 。 


因此 ， 如 果 有 输入 url 的 需求 ， 一 定 要 注意 这 一 点 ， 可 以 通过 type=text 的 input 并 自己 
提供 验证 pattem 的 方式 来 实现 : 


<input type=text pattern="\w+\. (Com|cn1org) "> 


3. «input type=search> 


search 类 型 和 text 类 型 很 类 似 ， 不 过 在 浏览 器 中 的 样式 中 会 有 一 些 变化 ， 一 般 会 呈现 
成 一 个 圆 角 和 矩形 ， 如 图 2.42 和 图 2.43 所 示 。 


typezurl: 


type-search: 
(Bm ] q—» 


图 2.41 Chrome 下 验证 url 图 2.42 iOS 上 的 效果 图 2.43 桌面 Chrome 的 效果 
如 果 你 希望 页 面 在 加 载 完 成 后 自动 聚焦 到 搜索 框 内 ， 可 以 使 用 autofocus 属性 : 


<input type=search autofocus> 


由 于 autofocus 并 不 是 所 有 浏览 器 都 支持 ， 你 可 以 使 用 类 似 如 下 的 polyfill: 


<form name="f"> 
<input id="q" autofocus> 
<script> 
// 检测 autofocus 的 支持 ， 如 果 没 有 原生 支持 ， 则 使 用 我 们 的 polyfill 
if (!("autofocus" in document.createElement ("input"))) ( 
// 自动 聚焦 
$ ("input [autofocus]") . focus (); 
} 
</script> 
<input type="submit" value=" 搜 索 "> 
«/form» 


type=search: 


4. <input type=color> 


选取 颜色 一 直 是 Web 上 的 难题 之 一 ， 人 们 通过 JavaScript 制作 了 各 式 各 样 的 颜色 选择 
器 。 比 如 ，jQueryUI 的 themeroller 中 包含 的 颜色 选择 器 (color picker), WK 2.44 所 示 。 

不 过 为 了 输入 一 个 颜色 值 引入 一 大 堆 JS 可 真是 个 麻烦 事 儿 。 HTML 5 中 的 颜色 选取 表 
单 则 会 调用 浏览 器 或 者 操作 系统 自 带 的 颜色 选择 器 ， 如 图 2.45 和 图 2.46 所 示 。 

选取 的 颜色 值 将 以 十 六 进 制 的 字符 串 格式 存在 input 元 素 的 value 属性 中 , 默认 值 一 般 
是 “#00000”: 


console.log(colorEl.value) // #000000 
5. «input type-range? 
range 用 来 定义 范围 输入 ， 如 图 2.47 所 示 。 


TI» 
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type-color: 

E 

eoo i 
[ES 

Li EE 


Border Text Icon 


#a85f| #2222 #2222 


图 2.44 color picker 图 2.45 Chrome 中 的 type=color 的 input 


type-color: 


#efe4b0 


KE... type-range: 


— 1m 


图 2.46 Opera 中 的 type=color 的 input 图 2.47 Chrome 中 的 type=range 的 input 


通过 CSS 设置 元 素 的 -webkit-appearance 属性 可 以 将 默认 的 水 平滑 动 选 择 条 变 成 垂 
直 的 ; 
input[type-range] ( 
width: 20px; 
height: 50px; 
/* 默认 的 取 值 是 slider-horizontal */ 


-webkit-appearance: slider-vertical; 


) 


运行 后 的 效果 如 图 2.48 所 示 。 
默认 情况 下 ，range 的 表单 值 只 能 取 从 0 一 100 的 整数 ， 不 过 和 number 类 型 一 样 ， 可 
以 通过 min 和 max 属性 来 改变 其 取 值 范围 的 最 大 值 和 最 小 值 : 


<input type-"range" min-"5" max-"15" value="6"> 


也 可 以 通过 step 属性 调整 取 值 的 精度 : 


<input type-"range" min-"0" max-"10" step-"2" value-"6"» 


负 的 最 大 和 最 小 值 自然 也 是 支持 的 : 


<input type-"range" min-"-100" max-"100" value-"0" step="10"> 
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小 数 也 没 问题 : 


<input type=range min=100 max=700 step=9.09090909 value=509.090909> 


甚至 可 以 通过 list 属性 和 datalist 给 滑动 条 加 上 刻度 : 


<input type-"range" min-"-100" max-"100" value-"0" step-"10" name-"power" 
list-"powers"» 

Xdatalist id-"powers"^ 

<option value-"0" /> 

Xoption value-"-30" /» 

<option value-"30" /> 


<option value="++50" /> «!-- 无 效 的 值 不 会 产生 刻度 --> 


«/datalist» 
如 图 2.49 所 示 。 
pm 
图 2.48  slider-vertical 图 2.49 带 刻 度 的 range〈Chrome) 


QE. list 属性 目前 浏览 器 的 支持 情况 不 算 乐观 ， 使 用 时 要 谨慎 。 
如 果 想 通过 程序 来 调整 range 的 值 ， 还 可 以 访问 对 象 的 stepDown 和 stepUp 方法 : 


rangeEl.value //50 
rangeEl.stepUp() // 往 上 加 一 
rangeEl.value //51 
rangeEl.stepDown (5) // 往 下 减 五 
rangeEl.value //46 


在 指定 了 step 的 情况 下 ，stepX 方法 会 按照 step 的 值 成 倍增 加 (指定 了 step 值 的 input 
一 定 只 能 是 step 值 的 倍数 ): 


rangeEl.value //50 

rangeEl.step - 5 

rangeEl.stepUp() //f En 5 

rangeEl.value bb 

rangeEl.value = 61 // value 值 会 被 设置 为 60, 因为 60 是 step 的 倍数 旦 最 接近 61 
rangeEl.stepDown (2) / /A FW 10 

rangeEl.value //50 


6. «input type=date>, «input type=time >, «input type=datetime> 和 <input type= 
datetime-local» 
这 三 种 input 都 是 输入 和 时 间 相 关 的 内 容 , 在 过 去 date picker 也 是 一 种 非常 常见 的 自 定 
义 组 件 ， 在 实现 上 也 是 比较 复杂 的 。 还 好 ， 现 在 终于 也 得 到 了 HTML 5 的 原生 支持 ， 如 图 
2.50 和 图 2.51 所 示 。 
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(s«)(s  2091383108v 加 > 


| 今天 || 清除 | 
Eeec — — 


图 2.50 Chrome 中 type-date 的 input 


type-datetime: 
[ 2013-01-1 *]|12:00| UTC 


10 11 12 13 
17 18 19 20 


23 24 25 26 27 
8031 1 2 3 
7 8 9 10 


| 今天 | 


图 2.51 Opera 中 type=datetime 的 input 


通过 date 表单 选择 得 到 的 值 是 一 个 日 期 字符 串 ， 其 格式 和 当前 系统 使 用 的 语言 相关 。 
比如 在 中 文 环境 下 ， 得 到 的 就 是 类 似 “2013-01-04” 的 值 ， 如 果 你 要 在 JavaScript 中 获取 到 


Date 对 象 ， 可 以 利用 这 个 值 新 建 一 个 对 象 : 


var dateEl = document.getElementById('date-id-123') 


new Date (dateEl.value) 


或 者 访问 这 个 元 素 的 valueAsDate 属性 : 
dateEl.valueAsDate 


// 得 到 选择 日 期 的 Date 对 象 


date 相关 的 表单 同样 也 支持 max 和 min， 不 过 它们 的 值 应 该 被 指定 为 合法 时 间 格 式 : 


<input type-datetime min-'2013-01-04' max-'2013-01-14'» 


运行 后 的 效果 如 图 2.52 所 示 。 


step 属性 也 支持 ， 其 单位 为 天 ， 如 果 设 置 小 数 则 取 其 近似 值 : 


<input type-datetime min-'2013-01-04' max-'2013-01-14' step=2.4> 


运行 后 的 效果 如 图 2.53 所 示 。 


今天 | | 清除 | 


图 2.52 从 4 号 到 14 号 以 外 的 日 期 都 无 法 选择 


BE 周一 | 周二 | 周三 | 疝 四 | 周 五 | 周 六 
3031 12 3 OB 5 
6 Bl s lad 10 HI 12 
13 14 15 16 17 18 19 


图 2.53 仅 偶数 日 可 选择 


time datetime 和 datetime-local 类 型 与 date 类 型 也 相似 ,不 过 time 仅 指定 时 间 ,datetime 
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指定 两 者 (Chrome 目前 不 支持 )，datetime-local 则 指定 本 地 时 间 (不 包含 时 区 )。 它 们 同样 
支持 min、max 和 step 属性 ， 只 不 过 含义 略 有 不 同 。 


7. <input type=week>、<input type=month> 


week 和 month 两 种 类 型 的 值 和 其 他 date 相关 值 也 相似 ， 不 过 只 能 选择 周 或 者 月 ， 
Chrome 没有 实现 它们 ， 但 Opera 实现 了 ， 如 图 2.54 和 图 2.55 所 示 。 


type=week: 
2013-W0: + 
一 月 站 | 2013 | 人 
三 四 五 六 日 
3i Ws 
7 8 9 10 11 12 13 7 8 9 10 11 12 13 
14 15 16 17 18 19 20 14 15 16 17 18 19 20 
21 22 23 24 25 26 27 
28 29 3031 1 2 3 
4 567 8 9 10 


周 
1 
2 
3 
4 
5 
6 


今天 


图 2.54 Opera 中 type=week 图 2.55 Opera 中 type=month 
截止 到 目前 这 两 者 浏览 器 支持 不 算 很 好 ， 选 用 的 时 候 要 慎重 。 
8. <input type=file > 
文件 在 过 去 一 直 是 HTML 的 一 个 短 板 ， 无 法 选择 多 个 文件 、 不 支持 Ajax 上 传 和 安全 
问题 等 等 。 现 在 多 文件 上 传 只 需要 指定 一 个 multiple 属性 便 可 以 做 到 : 
«input type-file multiple> 
运行 后 的 效果 如 图 2.56 所 示 。 
[选择 文件 ] 2 个 文件 
图 2.56 多 文件 选择 (Chrome) 


你 也 可 以 通过 指定 accept 属性 过 滤 文 件 域 接受 的 文件 类 型 , 其 值 可 以 是 MIMEType 或 
者 文件 扩展 名 : 

<input type=file accept-".doc,.docx, image/gif" > 

HTML 5 新 增 了 三 种 类 型 可 以 过 滤 文 件 更 加 方便 。audio/* 表示 音频 文件 ，video/* 表 
示 视 频 文件 ，image/# 表示 图 片 文件 : 

<!-- 只 接受 图 片 文件 --> 


<input type-file accept-"image/*" > 
AE: Ajax 上 传 也 得 到 了 原生 支持 。 更 多 关于 文件 API 的 内 容 ， 请 参考 后 续 章节 。 
除了 这 些 新 元 素 ，HTML 5 依然 向 下 兼容 所 有 的 HTML 4 的 表单 类 型 ， 诸 如 image 按 
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钮 和 reset 按钮 等 。 
2.3.13 ”表单 操作 


表单 操作 是 前 端 程序 员 的 必修 课 ， 也 是 我 们 会 在 实际 工作 中 遇 到 的 最 频繁 的 部 分 ， 即 
便 在 HTML 5 时 代 也 是 一 样 一 一 只 不 过 HTML 5 让 它 变 得 更 简单 了 。 

相 比 于 过 去 ， 代 表 表 单 本 身 的 form 元 素 并 无 太 大 变化 ， 不 过 增加 了 autocomplete 和 
novalidate 两 个 属性 ， 前 者 用 于 指定 整个 form 关联 的 表单 元 素 是 否 可 以 自动 完成 ， 后 者 则 
指定 整个 form 在 提交 时 不 用 被 验证 。 

<form action-"path/to/action" novalidate» 

<input type="text" required» 
<button> 提 交 </button> 

«/form» 

除了 取消 验证 ， 你 也 可 以 在 代码 中 调用 checkValidity0 方 法 手工 验证 : 

if(!form.checkValidity()) ( 

alert (" 验 证 表单 失败 ! ") 7 

} 

比较 有 趣 的 是 , 以 前 通常 必须 作为 form 子 元 素 才能 与 form 的 action 和 method 关联 的 
表单 元 素 现在 可 以 独立 出 来 了 : 

<form id-"form-1" action-"path/to/action"» 

Xinput type-"text" required» 

«/form» 

<button form="form-1"> 提 交 </button> 


这 意味 着 你 的 form 元 素 本 身 可 以 解放 了 ， 甚 至 可 以 隐藏 起 来 。form 属性 可 以 应 用 到 
大 多 数 表单 元 素 上 ， 包 括 select, textarea, output, keygen 和 fieldset 等 。 

与 form 属性 类 似 ，HTML 5 还 为 用 于 提交 表单 的 元 素 (button、image button 和 
input[type-submit]) 提供 了 更 大 的 控制 权 , 可 以 通过 如 下 儿 个 属性 覆盖 form 的 对 应 的 属性 。 
(1) formaction: 指定 了 formaction 的 提交 按钮 将 覆盖 与 之 关联 form 的 action 值 。 

(2) formenctype: 指定 了 formenctype 的 提交 按钮 将 覆盖 与 之 关联 form 的 enctype 值 。 
enctype 的 取 值 有 如 下 几 种 。 

口 application/x-www-form-urlencoded: 默认 值 ， 表 示 按 url 编码 方式 提交 表单 ， 用 于 

普通 的 提交 方式 。 

口 multipart/form-data: 通常 在 提交 文件 时 使 用 。 

口 text/plain: 纯 文 本 方式 。 

(3) formmethod: 指定 了 formmethod 的 提交 按钮 将 覆盖 与 之 关联 form 的 method 值 。 
可 取 的 值 有 get HI post (KRAH, form 不 支持 put 或 delete 这 样 的 提交 方法 )。 

(4) formtarget: 指定 了 formtarget 的 提交 按钮 将 覆盖 与 之 关联 form 的 target 值 。 用 于 
规定 在 何 处 打开 action URL。 可 以 指定 blank、_parent、_self 和 _ top 四 个 值 ， 或 者 iframe 
的 name〔 利 用 这 一 点 可 以 实现 伪 Ajax 上 传 )。 

除了 新 增 的 input 类 型 ,HTML 5 还 增加 了 几 个 表单 相关 的 元 素 ,它们 是 meter、progress、 
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output 和 keygen。keygen 用 于 生成 密 钥 时 ， 不 属于 本 书 讲解 内 容 ， 已 忽略 。 


1. meter 


meter 本 意 是 米 、 计 量 ， 不 难 猜 出 meter 标签 是 用 来 定义 度量 衡 的 工具 。 且 仅 用 于 已 知 
最 大 和 最 小 值 的 度量 。 比 较 常 见 的 使 用 场景 有 磁盘 使 用 量 、 内 存 占 用 量 、 匹 配 程度 和 投票 
率 等 。 例 如 : 


«meter min="0" value-"6" max="10"></meter> 


在 Chrome 下 meter 被 泻 当成 如 图 2.57 所 示 的 样式 。 


图 2.57 meter 元 素 


除了 使 用 min 和 max 定义 最 大 值 和 最 小 值 ，meter 还 可 以 使 用 下 面 这 样 几 个 属性 。 
O low: 定义 低 值 区 。 
口 high: 定义 高 值 区 。 
O optimum: 定义 最 佳 值 (可 以 高 于 高 值 区 ) 。 
下 例 表 示 一 个 学 生 的 成 绩 ，40 分 属于 低 分 ，90 属于 高 分 ， 最 佳 和 最 高 都 是 100 分 : 
<p> 
你 的 数学 成 绩 是 : 
<meter value-"91" min-"0" max-"100" low="40" high="90" optimum-"100"» 
A+</meter> 
</p> 
2. progress 
和 meter 非常 相似 的 是 progress 标签 ， 后 者 表示 “进度 ” 
<P> 
<progress> 没 有 具体 进度 值 的 进度 条 </progress> 
<progress max=100 value=50>50%</progress> 


</p> 


在 浏览 器 中 也 会 被 泻 染 为 和 系统 进度 条 一 样 的 外 观 ， 如 图 2.58 所 示 。 


图 2.58 进度 条 


进度 可 以 使 用 在 文件 上 传 和 表单 填写 等 场景 ， 对 提升 用 户 体验 有 着 非常 大 的 帮助 。 
progress 元 素 还 有 一 个 position 属性 ， 返 回 的 值 为 当前 值 除 以 最 大 值 的 商 : 
console.log(progressEl.position) // 对 于 上 例 而 言 为 0.5 


3. output 


output 元 素 用 来 展示 计算 结果 ， 一 个 简单 的 例子 就 能 理解 如 何 使 用 它 : 


<form onsubmit-"return false" oninput="o-value =  a.valueAsNumber + 
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b.valueAsNumber"» 

<input name-a type-number step-any» + 
<input name-b type-number step-any» = 
Xoutput name-o»«/output» 

«/form» 


在 这 个 例子 中 ，output 中 的 值 会 随 着 a I b 的 值 的 变化 而 变化 自动 求 和 )。 


2.3.14 HTML 5 表单 兼容 性 


m 


在 生产 环境 使 用 HTML 5 表单 ， 首 先 要 警醒 的 就 是 它 的 兼容 性 。 就 在 不 久 前 (2012 4 
12 H 17 Ho, W3C Zr £i HTML 5 标准 定稿 CWHATWG 的 标准 依然 在 继续 演进 )， 这 意 
味 着 浏览 器 对 于 它 的 完全 支持 依然 有 很 长 一 段 路 要 走 , 尤其 是 form 相关 的 规范 , 截止 到 本 
书 撰写 时 各 浏览 器 对 其 的 支持 仍旧 支离破碎 。input 类 型 的 兼容 性 如 表 2-6 所 示 。 


表 2-6 input 新 类 型 兼容 性 


type-? Firefox Safari Chrome Opera IE Android 
email 4+ 5~ 3.1+ 10+ 10.6+ 10+ 2.3- 
tel 4+ 5+ 6+ 10.6+ 10+ 2.3+ 
url 4+ 5+ 10+ 10.6+ 10+ PES 
search 4+ 5+ 6+ 10.6+ 10+ X3- 
color 1l- 52- 20+ 11+ 10- 23- 
number 11- 5.2+ 10+ 11~ 10- 2.3+ 
range i- 4+ 6+ 9+ 10+ 2.3- 
date 1l- 5~ 20+ 10.6+ 10- 2.3- 


所 有 类 型 在 所 有 浏览 器 中 使 用 都 不 会 遇 到 错误 ， 如 果 不 支持 该 类 型 浏览 器 将 会 自动 降 
级 为 一 个 text 类 型 的 表单 ， 对 于 表单 的 新 增 属性 ， 各 浏览 器 支持 也 是 各 异 ， 参 见 表 2-7。 


32-7 Form 相 关 属性 支持 


属性 
placeholder 4+ 
autofocus 4+ 


11.50+ 10+ 23+ 
U: 10+ 2.3- 


maxlength 


list (datalist) 4+ 10.6+ 10+ 2.3- 
autocomplete 4+ 17+ 10.6+ 10- 23- 
required 6+ 6+ 10.6+ 10+ 2.3- 


pattern 


spellcheck 3.6+ 10+ 11+ 10+ N/A 
Dovalidate 4+ 6+ 10.6+ 10+ 2.3- 
formnovalidate 4+ 6+ 10.6+ 10+ 2.3- 


formaction 


formmethod 


formtarget 


formenctype ? ? ? 7 ? 
multiple 3.6+ 6+ 11+ 10+ 2.3- 
min/max/step 6+ 
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HTML 新 增 的 其 他 表单 元 素 支 持 情况 在 浏览 器 中 也 不 一 样 ， 参 见 表 2-8。 
表 2-8 新 增 表 单元 素 兼 容 性 


Android 
2.3- 
2.3- 
2.3+ 

23t* 


Qi. 4+ 表 示 该 浏览 器 版 本 4 以 上 完全 支持 该 特性 ，5- 表 示 截 止 到 版 本 5 部 分 支持 此 特 


性 ，2.3- 则 表示 截止 到 版 本 2.3 还 不 支持 此 特性 ，N/A 表示 完全 不 支持 。 另 外 ，Safari 
Mobile 的 是 iOS 系统 版 本 而 非 浏 览 器 版 本 。 这 些 表格 并 不 完整 ,但 能 够 说 明 绝 大 


部 分 可 能 遇 到 的 情况 。 
vip eclipse 组 人 肉 摘 定 高 定 这 这 些 兼 容 性 疑难 症 即便 不 是 难于 E islas. 
AS XT 


就 行 了 。 " 多 的 类 库 或 者 框架 都 提供 了 简化 表单 操作 的 方式， 而 目 有 许 m a a "Tem 
单 的 库 也 非常 好 用 ，Modemizr 的 一 个 wiki 页 面 里 Chttps://github.com/Modernizr/Modernizr/ 
wikiHTML5-Cross-Browser-Polyfills) 引用 了 一 大 堆 针对 HTML 5 的 Polyfills。 


AE: Modemizr 是 一 个 专注 于 检测 浏览 器 HTML 5 和 CSS 3 特性 的 JavaScript JE. 
关于 表单 ， 如 果 你 没有 使 用 大 型 框架 的 话 ， 可 以 选择 一 些 基于 jQuery 的 插件 库 ， 
Webshims (http://afarkas.github.com/webshim/demos/index.html) 会 是 一 个 很 好 的 选择 。 它 
插件 提供 的 HTML 5 form 部 分 填 平 了 浏览 器 之 间 的 差异 ， 在 支持 相关 特性 的 浏览 器 里 ， 你 
写 的 表单 将 按 原样 输出 ， 而 不 支持 的 浏览 器 里 将 调用 自 定义 的 表单 组 件 。 图 2.59 是 在 下 8 
中 的 效果 。 


textarea: * ([maxlength="6"]) 


select * 


Please choose " 


number + number = output 
25 zjo 2) 25 


date -oninput- range 
03/08/2011] - -周一 


4 March2011 ë > 
Su Mo Tu We Th Fr Sa | Short Labels * 

12345 
6 7[8] 9 0 n 12 
13 14 15 16 17 18 19 
20 21 22 23 24 25 26 
27 28 29 30 31 


C Radiooption 3 


end 


图 2.59 基于 Webshims 插件 的 表单 (IE 8) 
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忘掉 兼容 性 吧 ，HTML 5， 从 现在 做 起 ! 

polyfill. shim 和 fallback: 这 三 个 词 在 前 文中 你 可 能 已 经 看 到 过 ， 可 能 也 产生 了 一 些 
迷惑 ， 究 竟 他 们 之 间 有 什么 区 别 ? polyfill 可 译 为 填充 物 ， 用 来 填充 浏览 器 之 间 的 差异 。 而 
shim 的 本 意 是 热 片 ， 和 polyfill 做 的 事 儿 也 类 似 ， 不 过 通常 用 来 填 平 浏览 器 API 的 坑 ， 将 
新 的 API 引入 到 旧 的 浏览 器 环境 中 。fallback 则 是 另外 的 概念 ， 简 单 的 说 ， 是 指 在 现代 浏 
览 器 中 100 分 的 功能 ， 在 老式 浏览 器 中 确保 其 能 到 达 60 分 的 及 格 线 即 可 。 


2.3.15 ”交互 式 元 素 (Interactive elements) 


HTML 5 在 交互 式 元 素 方面 的 增强 并 没有 表单 那样 引 人 注 目 ， 目 前 提供 的 功能 也 比较 
简单 。 


1. details & summary 


简介 和 展开 详情 是 一 种 很 常见 的 交互 需求 ，details 和 summary 便 是 为 此 而 生 : 


<details> 
<summary> 我 是 摘要 ， 点 击 我 会 展开 显示 全 部 内 容 </summary> 
<p>details 里 的 内 容 除 了 summary MARMAR. </p> 
<p> 你 看 不 见 我 看 不 见 我 ~</p> 


</details> 
不 过 目前 只 有 webkit 系列 的 浏览 器 支持 details 763: C Chrome&Safari), 如 图 2.60 所 示 。 
v 我 是 摘要 ， 点 击 我 会 展开 显示 全 部 内 容 


details 里 的 内 容 除了 summary 都 会 被 折叠 起 来 。 
你 看 不 见 我 看 不 见 我 ~ 


图 2.60 details & summary 


不 过 在 许多 JS 库 或 者 框架 里 都 包含 类 似 的 组 件 ， 在 Closure Library 里 有 zippy 组 件 ， 
在 jQueryUI 里 有 类 似 的 Accrodion 组 件 ，Bootstrap 里 有 Collapse 组 件 …… 


2. menu & menuitem 


menu 元 素 本 来 是 来 自 HTML 2 的 元 素 , 在 HTML 4 中 该 元 素 被 废弃 掉 了 , 到 了 HTML 
5 时 代 ，menu 元 素 又 被 重新 扒 出 来 ， 并 赋予 了 新 的 含义 : 无 序列 表 的 容器 ， 用 于 组 合 菜单 
选项 或 者 命令 。 在 前 文 contextmenu 一 节 中 我 们 已 经 讲解 了 此 元 素 ， 故 不 再 獒 述 。 


3. command 


command 表示 一 个 用 户 可 以 调用 的 命令 : 


<command type-"command" label-"Save" icon-"icons/save.png" onclick-"save()"» 


全 注意 : command 元 素 目前 暂 无 任何 浏览 器 支持 。 
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4. dialog 


dialog 用 来 表示 当前 程序 的 一 个 部 分 ， 用 来 一 个 完成 一 件 任务 ,其 形态 可 以 是 对 话 框 、 
审查 器 (inspector) 和 弹出 窗口 等 。 和 command 元 素 一 样 ， 目 前 尚 无 浏览 器 支持 ， 不 过 几 
乎 所 有 的 JavaScript UI 框架 都 会 自 带 对 话 框 组 件 。 

交互 式 元 素 目 前 还 很 稚嫩 ， 无 论 是 标准 还 是 浏览 器 的 实现 都 还 停留 在 非常 原始 的 地 
步 ， 远 远 比 不 上 在 真正 实践 中 人 们 对 交互 式 组 件 的 探索 。 在 桌面 端 和 移动 端 ， 五 花 八 门 的 
交互 组 件 层出不穷 , 交互 方式 想 要 稳定 下 来 成 为 标准 也 绝 非 易 事 , 因此 在 设计 页 面 交 互 时 ， 
建议 读者 遵循 这 样 几 个 要 点 : 

O 开发 Web App 时 ， 桌 面 端 要 易于 鼠标 和 键盘 操作 ， 手 机 端 要 考虑 触摸 屏 操作 。 

口 尽量 参考 操作 系统 本 身 的 控件 ， 例 如 桌面 端 有 右键 菜单 、 下 拉 列 表 、 选 项 卡 和 对 

话 框 等 ， 手 机 端 有 listview、slider 和 switch 等 。 
口 不 要 刻意 设计 新 交互 控件 ， 考 虑 用 户 学 习 成 本 和 可 用 性 。 
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Web 世界 的 五 彩 缤纷 ， 离 不 开 CSS 这 门 样式 语言 。 会 说 CSS 的 人 ， 如 同 画 家 一 般 ， 
挥 笔 舞 墨 之 间 ， 小 鸡 变 凤凰 。 会 CSS 3 的 人 ， 就 如 同 有 了 108 色 水 彩 组 合 套装 ， 可 以 尽情 
痢 笑 那些 只 拥有 12 色 的 软包装 水 彩 笔 的 小 朋友 ， 并 给 自己 的 凤凰 点 上 金光 闪闪 的 羽 鳞 。 


31 XT CSS 的 那 件 小 事 


本 书 稍 前 的 章节 已 经 无 数 次 地 强调 ，HTML 标签 被 设计 用 来 定义 文档 内 容 ， 文 档 如 何 
展现 则 由 用 户 代 理 (浏览 器 ) 来 完成 一 一 这 都 是 为 了 响应 Web 标准 化 的 口号 : 分 离 、 分 离 ! 
文档 、 样 式 与 行为 的 不 断 分 离 ! CSS 语言 本 身 的 设计 目标 也 不 外 乎 此 。 

20 世纪 90 年 代 初 HTML 刚 被 发 明 的 时 候 ， 样 式 表 〈stylesheet) 就 以 各 种 各 样 的 形式 
出 现 了 ， 不 同 浏览 器 提供 了 他 们 各 自 的 样式 语言 ， 终 端 用 户 可 以 自己 撰写 这 些 样式 语言 来 
改变 浏览 器 中 文档 的 最 终 外 观 (什么 ?上 个 网 还 要 学 一 门 语言 7 )。 不 过 用 户 始终 是 最 懒惰 
的 ， 编写 HTML 文档 的 作者 (开发 者 ) 逐渐 承担 起 了 文档 显示 的 重任 ， 而且， 文档 作者 也 
应 该 对 自己 文档 的 展现 负责 。 当 年 的 两 大 浏览 器 (IE&Netscape) 为 了 争取 更 多 的 用 户 和 开 
发 者 也 不 断 提供 各 种 各 样 能 改变 表现 层 的 标签 和 属性 (比如 font 标签 和 bgcolor 属性 等 )， 
这 一 度 导致 了 诸多 混乱 ， 创 建 内 容 清晰 独立 于 表现 层 的 文档 变 得 十 分 困难 。 为 了 解决 这 一 
问题 ， 伟 大 的 标准 组 织 W3C 再 次 挺身 而 出 ， 指 着 IE 和 Netscape 的 鼻子 说 ， 你 们 俩 能 不 能 
消停 消停 ? 看 我 弄 个 样式 语言 给 你 们 ! 于 是 一 一 CSS 诞生 了 。 

当然 了 , CSS 诞生 绝 非 一 日 之 功 ,关于 CSS 的 最 早 的 建议 , 是 1994 年 由 哈 肯 " 维 姆 «35 
(Håkon Wium Lie， 此 君 来 自 挪威 的 森林 ， 现 任 Opera 的 CTO) 在 芝加哥 的 一 次 会 议 提出 ， 
当时 他 还 在 与 李 档 士 在 CERN〔 欧 洲 核子 研究 组 织 ) 一 起 工作 〈 瞧 瞧 这 帮 大 牛 !)， 与 此 同 
时 ， 伯 特 ， 波 斯 (Bert Bos) 正在 设计 一 个 叫做 Argo 的 浏览 器 ， 于 是 两 个 人 决定 一 起 合作 
设计 CSS， 并 作为 W3C 组 织 CSS 相关 项 目的 技术 负责 人 ， 最 终 推 动 CSS 成 为 W3C 的 推 
荐 标准 。 

通常 ， 样 式 表 语 言 的 使 用 者 有 三 种 : 读者 (也 就 是 用 户 )、 作 者 (开发 者 ) 和 用 户 代 
理 〈 浏 览 器 )， 如 何 很 好 的 照顾 这 三 者 的 需求 却 是 一 个 难点 。 在 CSS 发 明之 初 ， 有 一 些 样 
式 表 语 言 已 经 存在 或 者 有 人 建议 了 , 比如 Netscape 曾 向 W3C 提出 的 JSSSCavaScript-Based 
Style Sheets) 标准 : 


with (tags) ( 
contextual(UL, LI).color = "red"; 
contextual(UL, UL, LI).color = "blue"; 


T 
ids.z098y.letterSpacing - "0.3em" 
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classes.foo.H1.color = "red" 

tags.EM.color = "red"; /* red, really red!! */ 
tags.B.color - "blue"; // blue, really blue 
contextual(tags.DIV, tags.P).color = "green"; 
contextual(classes.reddish.all, tags.H1).color = "red"; 
contextual(ids.x78y, tags.CODE).background - "blue"; 


JSSS 采用 了 JavaScript 的 语法 来 撰写 样式 ， 对 于 很 多 用 户 而 言 ， 是 很 不 友好 的 一 一 只 
想 改 改 字体 ， 却 要 学 习 JavaScript? 这 可 不 理想 。 同 期 的 样式 表 语 言 还 有 James Clark 的 
DSSSL, Robert Raisch 的 Stylesheets for HTML 等, 它们 无 一 例外 地 被 历史 的 洪流 所 淘汰 了 。 

CSS (Cascading Style Sheets 的 缩写 ， 即 层 且 样式 表 ) 是 第 一 个 提出 “ 层 琶 ”概念 的 
样式 表 语 言 。 所 谓 层 登 ， 就 是 一 个 文件 的 样式 可 以 从 其 他 样式 表 中 继承 下 来 ， 这 样 使 得 样 
式 的 编写 非常 灵活 ， 文 档 最 终 呈 现 可 以 混合 作者 、 读 者 以 及 用 户 代理 各 自 的 喜好 。CSS 层 
登 的 特性 、 强 大 的 功能 再 加 上 其 简单 易学 的 语法 ， 使 其 很 快 风靡 于 样式 表 最 广大 的 使 用 
者 一 一 设计 师 们 。 

1996 年 12 月 ，CSS 的 第 一 个 版 本 正式 发 布 ，1998 年 第 二 版 发 布 ， 这 两 个 版 本 的 规范 
通常 被 称 为 CSS 1 和 CSS 2。 

按照 W3C 的 说 法 ，CSS 没有 传统 意义 上 的 版 本 号 ， 而 是 通过 级 别 (level) 来 定义 的 ， 
后 一 级 别 的 规范 建立 在 前 一 级 别 之 上 。 每 一 个 高 级 别 的 level 都 包含 低级 别 的 全 部 内 容 ， 这 
样 使 得 解析 高 级 别 CSS 代码 的 解析 器 也 能 完美 兼容 解析 低级 别 的 CSS 代码 。 

CSS level 1 对 应 着 CSS 1 规范 ，CSS 1 已 经 被 工作 组 视 为 废弃 Cobsolete) 标准 ， 我 们 
也 不 做 过 多 考究 。CSS level 2 最 初 对 应 着 CSS 2 规范 ， 不 过 在 CSS 2 规范 实施 的 过 程 中 ， 
发 现 的 问题 都 被 写 进 了 勘误 表 (Erata list), 而 各 种 问题 又 层出不穷 ,使 得 勘误 表 变 得 笨重 
不 堪 ，W3C 决定 新 增 一 个 修正 版 的 CSS 2， CSS Level 2 Revision 1， 也 就 是 最 广为人知 ， 
应 用 也 最 为 广泛 的 CSS 2.1 规范 。 因 此 ， 可 以 说 CSS 2.1 规范 定义 了 CSS Level 2。CSS 2.1 
来 自 CSS 2， 并 替换 了 CSS 2。CSS 2 中 的 一 些 内 容 仍然 在 CSS 2.1 中 保留 ， 一 些 内 容 则 被 
修改 或 者 移 除了 。 这 些 移 除 的 部 分 也 许 会 在 未 来 CSS 3 规范 中 实现 ， 而 未 来 CSS Level 3 
将 以 CSS 2.1 的 基础 上 定义 。 这 意味 着 CSS 2.1 有 着 更 好 的 兼容 性 。 关 于 CSS 的 核心 概念 、 
惯用 法 和 学 习 路 线 几乎 都 是 围绕 CSS 2.1 展开 。 学 习 CSS 3， 也 离 不 开 CSS 2.1， 而 且 严 格 
的 说 ，CSS 3 也 包含 CSS 2.1 的 全 部 内 容 。 

CSS Level 3 依然 是 在 CSS Level 2 (CSS 2.1 规范 ) 基础 上 定义 的 ， 但 CSS 3 在 定义 方 
式 上 做 了 很 大 的 改变 ， 采 用 了 模块 化 的 方式 (module by module)。 以 前 的 规范 是 一 个 规范 
涵盖 全 部 内 容 ， 而 现在 的 规范 是 在 之 前 规范 的 基础 之 上 通过 模块 化 来 定义 ， 每 一 个 模块 都 
为 CSS 2.1 添加 或 者 替换 某 些 功能 。 这 样子 意味 着 CSS 的 不 同 功能 完全 分 离 了 ， 你 可 以 在 
任何 时 候 学 习 它 们 的 任意 一 个 部 分 (CSS 的 基础 依然 是 必须 的 )， 浏 览 器 也 可 以 选择 在 合 
适 的 时 候 实现 它们 中 的 某 些 部 分 。 当然, 本 章 的 内 容 将 着 重 讲解 现代 浏览 器 已 经 实现 的 部 分 。 


32 CSS 的 核心 概念 


正 所 谓 万 丈 高 楼 平地 起 , 在 学 习 CSS 3 的 新 特性 之 前 ， 有 些 CSS 的 核心 概念 是 非常 值 
得 我 们 去 深入 挖掘 的 ， 它 们 对 我 们 实际 使 用 和 继续 学 习 CSS 这 门 设 计 语 言 都 非常 有 帮助 。 
本 节 内 容 不 会 涉及 CSS 的 最 基础 内 容 一 一 诸如 选择 器 的 使 用 和 样式 属性 的 含义 等 一 一 而 
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会 讨论 更 多 不 容易 理解 或 者 容易 导致 误解 的 内 容 ， 如 浮动 和 格式 化 上 下 文 等 。 也 许 过 去 你 
经 常 使 用 它们 ， 但 你 的 理解 可 能 还 有 偏差 或 者 模糊 不 清 的 地 方 ， 这 些 内 容 在 CSS 知识 体系 
里 面 处 于 核心 地 位 。 本 节 内 容 将 为 你 探 一 探 它 们 的 究竟 。 


3.2.1 语法 、 层 全 和 特殊 性 (specificity) 


CSS 简单 的 语法 使 得 CSS 拥有 着 极其 广泛 的 受众 。CSS 的 核心 语法 用 图 3.1 即 可 阐述 
58: 


图 3.1 CSS 语法 


CSS 语法 简单 灵活 ， 选 择 器 (selector) 直接 与 HTML 代码 对 应 ， 声 明 Cdeclaration) 
非常 人 性 化 ， 绝 大 部 分 属性 (property)〉 名 都 是 有 含义 的 英文 单词 或 词组 ， 属 性 值 (value) 
大 部 分 也 是 直接 用 有 意义 的 单词 表示 。 例如 ， 颜色 值 可 以 取 yellow. red 和 orange， 预 设 的 
border 样式 有 solid 和 dashed 等 。 


CSS 语法 有 很 高 容错 性 一 一 一 条 错误 的 语句 并 不 会 影响 之 后 语句 的 解析 : 
h1{ 
color: blue /* 这 里 没有 分 号 ， 导 致 语法 错误 */ 
font-size: 20px /* 这 条 声明 不 会 被 应 用 */ 
) 
h2 ( 
height: 200px; /* 对 于 不 识别 的 属性 名 ， 将 会 自动 忽略 一 这 也 是 IE6、7、8 
hack 的 基本 原理 */ 
color: yellow; /* 前 面 的 语法 错 不 会 影响 这 条 声明 */ 


$ 


AFE: 虽然 CSS 的 容错 性 很 高 ， 但 是 在 编写 时 也 别 忘 了 使 用 工具 (CSS Lint 等 ) 检查 


CSS 是 否 语法 正确 。 
由 于 CSS 继承 的 特性 ， 编 写 样式 将 会 异常 省 时 省 力 : 
#div1 ( 
color: #FF0; 
} 
#divl p ( 
font-size: 20px; /* divi 中 的 p 元 素 的 内 容 会 变 为 黄色 (#FF0) ， 因 为 color 
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这 个 属性 是 可 以 继承 的 ， 无 须 再 单独 设置 color 一 次 */ 
除了 单个 样式 表 中 样式 继承 的 特性 ， 不 同 来 源 样式 表 之 间 也 会 表现 出 层 且 的 特性 。 
样式 表 的 来 源 有 三 种 : 作者 、 用 户 和 用 户 代 理 ， 他 们 分 别 〈 通 常情 况 下 ) 对 应 着 开发 
者 或 设计 师 , 最 终 用 户 和 浏览 器 。 由 于 CSS ERWEE, 这 三 种 来 源 的 样式 表 都 会 起 作用 ， 
以 期 在 最 大 程度 上 满足 所 有 人 的 显示 需求 。 然 而 这 三 者 之 间 层 钱 的 优先 级 (权重 ) 各 有 不 
同 ， 默 认 情况 下 ， 他 们 之 间 优 先 级 的 大 致 顺序 是 : 作者 -> 用 户 -> 用 户 代理 一 一 只 有 一 个 例 
外 ， 即 指定 了 !important 的 样式 规则 除外 ， 它 们 将 被 提升 到 最 高 优先 级 。 
外 提示 1: IE. FifreFox 和 Safari 等 浏览 器 上 都 可 以 设置 用 户 CSS 文件 ， 但 在 Chrome 
上 无 法 设置 用 户 样式 表 ， 只 能 通过 chrome 扩展 的 方式 来 添加 自 定 义 样 式 ， 不 过 
这 也 无 可 厚 非 一 - 教 爸 爸 妈 妈 上 网 已 经 够 累 了 ， 难 道 还 要 教 他 们 写 CSS 么 ? 


外 提示 2: 对 于 FireFox， 你 可 以 通过 访问 resource://gre-resources/ 来 查看 浏览 器 的 默认 资 
源 ， 其 中 包含 了 默认 的 CSS 样式 ，webkit 系列 的 浏览 器 没有 提供 访问 浏览 器 默 
认 样 式 的 接口 ， 不 过 由 于 webkit 本 身 是 开源 项 目 ， 你 可 以 通过 查看 webkit 中 相 
关 源码 的 方式 来 获知 。 
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css 文件 中 包含 了 大 
部 分 原生 的 默认 样式 定义 ， 如 hr 元 素 : ? 
Ice 

display: block; 

-webkit-margin-before: 0.5em; 

-webkit-margin-after: 0.5em; 

-webkit-margin-start: auto; 

-webkit-margin-end: auto; 

border-style: inset; 


border-width: 1px 
} 


最 后 被 显示 为 块 级 元 素 ， 前 后 各 有 0.5em 的 margin, HELKA TRA (inset) 的 边框 
样式 ， 如 图 3.2 所 示 。 


p——————————————'(J mf —ÁÀ——M—M" 


图 3.2 webkit 下 默认 的 hr 样式 〈 放 大 后 ) 


除了 样式 表 来 源 和 属性 的 层 琶 性 ， 选 择 器 的 特殊 性 〈specificity) 值 也 发 挥 着 重要 的 
作用 ， 广 为 人 知 的 “ID 选择 器 优先 级 高 于 class 选择 器 优先 级 ”规则 便 来 自 于 特殊 性 计算 


<!DOCTYPE HTML> 
<style type="text/css"> 
div { 
width: 100px; 
height: 100px; 


} 
dct c2 div con { 
background-color: yellow; 
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div ( 
background-color: black; 
] 
#c2 div ( 
background-color: blue; 
} 
#c2 #content { 
background-color: red; 
} 
</style> 
«div id="c1"> 
<div id="c2"> 
<div id="content" class="con"></div> 
</div> 
</div> 


在 前 面 的 例子 中 ， 按 照 CSS 的 规则 ， 多 条 CSS 声明 中 的 “background-color” 都 作用 
在 content 元 素 上 ， 最 终 content 的 背景 色 取决 于 特殊 性 的 加 权 结 果 。 特 殊 性 的 值 可 以 看 作 
是 一 个 由 四 个 数组 成 的 一 个 组 合 ， 用 a，b，c 和 d 来 表示 它 的 四 个 位 置 。 依 次 比较 a b, 
c 和 d 这 四 个 数 其 特殊 性 的 大 小 。 比 如 ，a 值 相 同 ， 那 么 b 值 大 的 组 合 特殊 性 会 较 大 ， 以 此 
类 推 。 不 同 的 选择 器 对 应 的 a，b，c 和 d 四 个 值 的 权重 不 同 ， 其 基本 规则 : 
O 在 html 标签 的 style 属性 中 定义 的 样式 (内 联 样式 ) ，a 值 记 为 1。 
口 CSS 代码 中 ID 选择 器 ，b 记 为 1， 多 个 选择 器 则 累加 b 值 。 
口 class HH Chover) 选择 器 用 c 记 。 
O 元 素 (div) 和 伪 元 素 Cbefore) H dig. 
在 这 个 规则 下 ， 容 易 计 算出 上 面 例 子 中 各 条 声明 的 特殊 性 值 : 
<style type="text/css"> 
div { 
width: 100px; 
height: 100px; 
a c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */ 
background-color: yellow; /* 胜出 */ 


} 

div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ 
background-color: black; 

} 

dc2 div ( /* a-0 b-1 c-0 d-1 -> specificity = 0,1,0,1 */ 
background-color: blue; 

} 

#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */ 
background-color: red; 

} 

</style> 


因此 ， 最 终 ID X content 的 元 素 背 景 会 是 鲜亮 的 黄色 。 
3.22 TERR! (Box Model) 


框 模型 又 称 盒 模型 ， 对 于 前 端 工程 师 而 言 可 用 人 尽 皆 知 来 形容 它 ， 在 浏览 器 漫长 而 不 
悠久 的 历史 上 有 过 两 种 框 模型 ， 其 中 一 种 是 W3C 标准 的 框 模型 ， 如 图 3.3 所 示 。 
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Padding 


Content 


一 一 - Margin edge 
Border edge 


一 一 ” Fadding edge 
—— —— Content edge 


图 3.3 框 模型 示意 图 


HTML 中 的 每 一 个 可 感知 元 素 都 会 在 浏览 器 中 生成 框 一 一 一 个 矩形 的 区 域 ， 每 个 框 都 
包含 四 个 矩形 组 成 部 分 ,从 外 向 内 依次 是 : 外 边 距 (Margin)、 边 框 (Border)、 内 边 距 (Padding) 
和 内 容 (Content)， 这 四 个 部 分 形成 了 四 个 框 (box)。 

对 于 一 个 定义 了 高 宽 的 且 高 宽 生 效 的 元 素 ， 元 素 实际 的 尺寸 来 自 于 框 中 的 四 个 值 的 计 


dbox ( 

width: 70px; 
margin: 10px; 
padding: 5px; 


这 个 例子 中 ， 最 终生 成 框 的 实际 尺寸 可 以 参考 下 面 的 示意 图 (如 果 定 义 了 border 宽度 
值 ， 最 后 的 结果 也 是 要 包含 border 的 ): 


10px 5px 70px 5px 10px 

< >< >< >< > > 
n 1 
| margin: 10px | 
| | 
1 * 7 1 1 
| | padding:Spx | | 
l 1 I 
1 | 1 | 
1 | 1 1 
l 

| l width:70px i | 
1 | 1 | 
| | | I 
1 | 1 1 
1 | 1 1 
| I 

1 l z | 
| | 
| I 
| | 
l 1 
< > 

100px 
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要 注意 的 是 ，margin 对 于 table 相关 类 型 (除了 table-caption, table 和 inline-table 这 3 
K) 的 元 素 是 不 起 作用 的 ， 如 td、 tr 和 也 等 。 另 外 对 于 行内 非 替 换 元 素 〈 如 span 元 素 )， 
垂直 方向 的 margin 是 不 起 作用 的 。 

padding 属性 也 有 一 定 的 限制 ， 它 可 以 使 用 到 除 display 值 是 table-row-group、 
table-header-group、 table-footer-group、table-row、table-column-group 和 table-column 之 外 
的 所 有 元 素 。 

margin 有 一 项 非常 独到 的 特性 是 可 以 为 其 指 一 ) 
定 负 值 ， 如 果 将 正 值 理解 为 “ 推 开 ”元 素 周围 的 其 | aa | 
他 元 素 ， 那 么 负 值 则 表现 为 “ 拉 近 ”元 素 周围 的 元 (PAES | 
素 。 利 用 负 边 距 可 以 实现 很 多 有 趣 的 视觉 效果 ， 例 
如 可 以 实现 表单 组 的 效果 ， 如 图 3.4 所 示 。 idi rand 


.input-group { 
width: 200px; 

ji 

.input-group .text { 
-webkit-appearance: none; 
border: 1px solid gray; 
padding: 4px 4px; 
width: 200px; 
margin: 0; 

) 

.input-group .text:first-child ( 
border-radius: 5px 5px 0 0; 
margin-bottom: -lpx; 

) 

.input-group .text:last-child ( 
border-radius: 0 0 5px 5px; 

) 


如 果 要 使 得 上 面 的 表单 更 完善 ， 还 应 该 处 理 focus 情况 下 的 z-index: 


.input-group .text:focus ( 
position: relative; 
z-index: 1; 


i 


另 一 种 框 模型 来 自 老 版 本 的 焉 ， 两 者 有 细微 的 差别 ， 主 要 是 在 计算 框 的 尺寸 时 所 用 边 
界 不 同 。 一 个 元 素 可 以 通过 box-sizing 属性 来 改变 盒子 尺寸 的 计算 规则 ; 
#div1 ( 
box-sizing: border-box; /*  width/height = 实际 可 见 尺 寸 (包含 content, 
padding, border) + marigin */ 


j 
ddiv2 ( 

/* 默认 情况 ，W3C 模型 */ 

box-sizing: content-box; /* 实际 可 见 尺寸 = width/height + padding + border 
* margin */ 


) 


1. 外 边 距 折 释 
在 框 模型 中 ， 外 边 距 折 难 是 一 个 非常 容易 使 人 迷惑 的 地 方 ， 简 单 说 来 ， 外 边 距 折 盖 指 
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的 是 相 邻 的 两 个 或 多 个 外 边 距 会 合并 成 一 个 外 边 距 。 注 意 此 处 说 的 相 邻 是 外 边 距 相 邻 ， 而 
不 是 元 素 相 邻 ， 比 如 三 个 嵌 套 的 元 素 他 们 的 上 边 距 都 是 相 邻 的 ， 因 此 其 边 距 会 折 县 : 
<div style="border:1px solid red; width:100px;"» 
«div id-"divi" style-"margin-top:50px; background-color:green; 
height:50px; width:50px;"» 
<div id-"div2" style-"margin-top:100px; "»B«/div» 
«/div» 
«/div» 
在 上 面 的 例子 中 , divl 和 div2 的 margin-top 是 相 邻 的 , 最 后 会 折合 成 一 个 margin-top, 
其 值 为 两 者 中 较 大 的 值 ， 最 后 的 结果 如 图 3.5 所 示 。 


口 这 两 个 外 边 距 没有 被 非 空 内 容 、padding、border 或 clear 属性 所 隔 开 。 
O 这 些 margin 都 处 于 常规 流 Gn-flow) 中 ， 他 们 可 以 是 相 邻 的 节点 ， 也 可 以 是 父子 
节点 。 
满足 这 两 个 条 件 的 margin 我 们 称 其 为 是 相 邻 的 Adjoining)。 那 么 它们 分 别 表 示 什 么 
意思 呢 ? 被 隔 开 这 个 很 好 理解 ， 对 于 上 例 ， 如 果 我 们 将 代码 改 成 下 面 这 样 : 
<div style="border:1px solid red; width:100px;"» 
«div id-"divi" Style-"border:lpx solid | blue;margin-top:50px; 
background-color:green; height:50px; width:50px;"» 
<div id-"div2" style-"margin-top:100px; "^B«/div» 
«/div» 
«/div» 


运行 后 的 效果 如 图 3.6 Bras o 


100 


图 3.5 外边 距 折 邯 图 3.6 WALEZI 


为 divl 加 上 边框 后 , div2 的 上 外 边 距 就 不 再 与 div1 发 生 折 登 了 ,因此 出 现 了 图 3.6 中 
字母 B 所 在 div 跑 到 最 外 层 元 素 之 外 的 效果 。 同 样 道理 ， 如 果 为 divl 添加 padding-top 或 
者 文字 内 容 ， 都 会 使 得 折合 失 效 。 

同样 ， 由 于 浮动 元 素 、inline-block 元 素 和 绝对 定位 元 素 不 属于 当前 普通 流 ， 因 此 它们 
也 不 会 和 垂直 方向 上 的 其 他 margin Jr: 

«div style-"margin-bottom:50px; width:50px; height:50px; background-color: 

green; ">A</div> 

<div style="margin-top:50px; width:100px; height:100px;background-color: 
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green;display:inline-block"- 
<div style-"margin-top:50px; background-color:gold;"»5B«/div» 
«/div» 
运行 后 的 效果 如 图 3.7 所 示 。 
此 时 ，B 的 父 div 和 A 所 在 div 不 再 属于 同一 个 普通 流 ， 因 此 不 会 发 生 外 边 距 折 笃 ， 
同 理 可 推 至 B 本 身 所 在 元 素 。 


2. 关于 外 边 距 折 又 的 计算 


多 个 margin 在 发 生 折 炙 时 根据 margin 正 负 值 的 不 同 会 出 现 不 同 的 折合 效果 ， 大 致 说 
来 有 如 下 儿 个 规则 : 
口 当 这 些 margin 均 为 正 值 时 ， 取 margin 中 的 最 大 值 。 
O 当 margin 中 正 负 值 都 存在 时 , 先 取出 负 margin 中 绝对 值 最 大 的 ,然后 ,和 下 margin 
值 中 最 大 的 margin 相 加 。 
深刻 理解 框 模型 离 不 开 实践 ， 如 果 你 使 用 Chrome 浏览 器 的 开发 者 工具 进行 调试 ， 可 
以 方便 地 查看 甚至 编辑 一 个 元 素 生 成 的 框 ， 如 图 3.8 所 示 。 


i v Metrics 
50 border 
l T : paddirid4] 
50 338x32 

b Properties 
> DOM Breakpoints 
> Event Listeners Y- 

图 3.7 ^W 图 3.8 在 Chrome 中 调试 框 模型 


不 过 ， 记 住 这 些 关 于 边 距 的 口诀 还 是 远 远 不 够 的 ， 可 视 化 模型 将 会 是 对 理解 页 面 元 素 
布局 更 加 重要 的 内 容 。 


3.2.3 可视化 格式 模型 (visual formatting model) 


可 视 化 格式 模型 可 谓 是 页 面 布 局 、 元 素 与 元 素 间 关 系 遵循 的 基本 规则 了 ， 掌 握 好 这 部 
分 内 容 ,基本 上 在 各 种 浏览 器 “诡异 ”的 兼容 性 问题 就 打 遍 天 下 无 敌手 了 一 一 甚至 是 下 6、 
7 和 8。 不 过 本 节 内 容 不 会 去 讲 浏览 器 差异 的 细节 , 仅仅 阐述 核心 概念 的 原理 极其 应 用 ， 这 
些 概 念 无 论 是 在 桌面 浏览 器 还 是 在 手机 浏览 器 都 同样 适用 , 且 有 助 于 你 写 出 快 而 好 的 CSS。 
动心 了 吧 ? 

所 谓 可 视 化 格式 模型 ， 指 的 是 用 户 代 理 〈 浏 览 器 ) 在 可 视 化 媒体 〈 显 示 器 ) 上 处 理 文 
档 树 。 在 这 个 模型 中 ， 每 一 个 文档 中 的 元 素 都 会 根据 框 模型 产生 零 个 或 多 个 框 ， 这 些 框 的 
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布局 受 控 于 下 面 儿 个 因素 : 
O 框 的 尺寸 和 类 型 ( 宽 高 几何 ? 行内 框 还 是 块 框 ? ) 。 
O 定位 模式 (没有 定位 的 常规 流 ? 浮动 ? 还 是 绝对 定位 ? ) 。 
口 文档 树 中 元 素 间 的 关系 。 
口 外 部 信息 《〈 视 口 大 小 ? 图 片 真实 尺寸 ? ) 
以 上 四 个 因素 共同 决定 了 一 个 元 素 在 页 面 上 的 最 终 显示 ， 掌 握 了 这 四 点 ， 基 本 就 掌握 
T CSS 布局 的 精明 。 


包含 块 (Containing block) 


在 CSS 中 关于 框 的 很 多 定位 尺寸 的 计算 , 都 和 其 矩形 边界 有 关 ， 这 个 算 形 我 们 称 之 为 
包含 块 一 一 包含 块 是 一 个 相对 的 概念 ， 一 个 元 素 的 父 元 素 ， 通 常 就 是 这 个 元 素 以 及 其 子孙 
元 素 的 包含 块 。 

包含 块 是 一 个 很 重要 的 概念 ， 可 视 化 格式 模型 中 很 多 行为 的 理论 都 和 它 有 关 : 宽 高 为 
auto 时 的 计算 、 绝 对 定位 元 素 和 浮动 元 素 的 定位 等 等 。 

某 个 元 素 的 包含 块 并 不 一 定 是 这 个 元 素 的 父 元 素 ， 严 格 的 包含 块 判 定 比较 复杂 ， 流 程 
可 以 参见 图 3.9 所 示 。 


初始 包含 块 


判断 position 特 性 的 值 


static iA). relative m: 
absolute 


最 近 的 玩 级 或 单元 可 视窗 品 " 
格 或 者 行内 块 祖先 MN 
A 否 存在 
position 特 性 的 值 为 非 S 二 包含 于 的 硕 、 左 边 是 祖先 元 素 
“static" 的 祖先 元 素 生成 的 第 一 个 框 的 项 、 左 内 边 


距 边界 (padding edges)， 右 、 [e 
是 m 下 边 是 祖先 元 素 生 成 的 最 后 | 
-个 框 的 右 、 下 内 边 距 边界 


L = ( padding edges) 
是 .| 判断 "direction” 


元 素 是 否 行内 元 素 


^io 
特性 的 值 | EIXTENUDORXDERUCOR 
[s 个 、 生 威 的 第 一 个 杠 的 项 、 右 内 边 
距 边 界 (padding edges)， 左 、 |u] 
aen 边 是 祖先 元 素 生成 的 最 语 
-个 框 的 左 ， 下 内 边 距 边界 
(padding edges) 


over 


记忆 判定 包含 块 这 图 可 能 比较 吃力 ， 对 于 绝 大 部 分 情况 ， 你 可 以 简单 地 记 为 : 一 个 元 
素 的 包含 块 边界 是 它 最 近 的 非 static 定位 祖先 的 内 容 区 域 。 


图 3.9 包含 块 判定 
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2. 匿名 块 框 (Anonymous block boxes) 


你 经 常会 听 到 行内 元 素 生成 行内 框 、 块 级 元 素 生 成 块 框 这 样 的 概念 ， 但 可 能 很 少 接触 
匿名 块 框 这 个 名 词 ， 其 实 只 要 把 握 住 一 点 一 一 所 有 的 元 素 都 会 生成 框 一 一 就 很 容易 理解 匿 
名 块 框 的 构造 过 程 了 。 例 如 下 面 这 段 代码 : 

Xp»Somebody whose name I have 

forgotten, said, long ago: 

Xq»a box is a box,</q> 

and he probably meant it.«/p» 


我 们 加 上 样式 : 


p ( display: block; } 
q ( display: block; margin: lem ] 


最 终 浏览 器 中 演 染 的 效果 可 能 如 图 3.10 Somebody whose name I have 
所 示 。 forgotten, said, long ago: 
p 和 q 元 素 本 身 会 生成 两 个 块 框 , 其 中 每 . 
-行文 本 都 会 生成 一 个 行 框 (line box), 上 面  Q Dox is a box" 
例子 一 共生 成 了 四 个 行 框 ,p 中 的 块 级 q 元 素 and he probably meant it. 
将 上 下 行 框 分 成 了 两 个 部 分 ， 此 时 会 为 这 两 
部 分 生成 两 个 匿名 块 框 ， 如 图 3.11 所 示 。 


图 3.10 匿名 框 的 泻 染 


Somebody whose name I have 
| forgotten, said, long ago: 


a box is a box, 


NS he probably meant it. 


block box anonymous block box 


图 3.11 匿名 框 的 生成 

匿名 框 并 不 是 实际 的 框 ， 引 入 此 概念 将 非常 容易 理解 一 些 行为 一 一 比如 后 面 要 讲 到 的 
浮动 。 

3. 定位 

此 处 的 定位 并 不 是 指 绝 对 定位 或 者 相对 定位 ， 这 里 是 一 个 更 加 宽泛 的 概念 。CSS 中 的 
定位 方案 (Positioning schemes) 包含 这 样 几 种 。 

口 常规 流 ， 即 文档 在 默认 情况 下 的 定位 ， 其 中 包含 块 框 块 级 格式 化 规则 、 行 内 框 的 

行内 格式 化 规则 和 相对 定位 规则 。 
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口 浮动 : 浮动 元 素 将 脱离 常规 流 进行 布局 一 一 元 素 将 靠边 站 。 
O 绝对 定位 : 同样 将 脱离 常规 流 ， 并 根据 包含 块 来 计算 具体 位 置 。 
浮动 或 者 绝对 定位 的 元 素 将 被 成 为 流 外 (out of flew ) 元 素 , 反之 则 成 为 流 内 (in flow ) 


元 素 。 
这 三 种 定位 的 大 体 规则 你 肯定 也 已 经 接触 过 许多 ， 不 过 display. position 和 float 这 三 
者 混用 的 时 候 也 会 使 人 迷惑 : 
divl ( 
position: absolute; 
display: inline; 
float: right; 
margin: 20px; 
width:200px; 
j 


对 于 这 样 一 个 div 元 素 ， 它 的 最 终 泻 染 结果 应 该 是 怎样 的 呢 ? 作为 一 个 内 联 元 素 被 绝 
对 定位 ,并 且 只 有 左右 有 20px 的 边 距 ? 还 是 不 绝对 定位 而 基于 包含 块 向 右 浮 动 ? 实际 浏览 
器 泻 染 结果 应 该 是 前 者 ， 并 且 最 后 作为 块 级 元 素 泻 染 成 200px 宽度 的 盒子 。 
对 于 这 三 者 的 关系 ， 可 以 参照 图 3.12 来 得 出 结论 。 
元 素 


' display' 是否 为 
'none'? 


元 素 不 产生 框 ，' position" 


fil float 不 起 作用 ARCSR 
' position' 的 值 是 否 是 
COMIS caue 或 'fixed'? 


'float' 计算 后 的 值 应 该 是 
'none' ,并 且 ，' display 
会 被 按照 下 表 设 置 


display 的 值 不 
按照 对 应 表 Lal 

设置 应 用 指定 的 
"display 特性 值 


图 3.12 position, float 和 display 的 关系 


其 中 display 属性 的 计算 值 参考 表 3-1。 
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表 3-1 转换 对 应 表 


设 定 值 计 算 值 
inline-table table 
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, block 
table-footer-group, table-row, table-cell, table-caption, inline-block 
其 他 同 设 定 值 


因此 ， 上 例 实 际 最 终 的 演 染 结果 将 等 价 于 : 


divi ( 
position: absolute; 
display: block; 
float: none; 
margin: 20px; 
width: 200px; 

} 


4. 常规 流 (Normal Flow) 


常规 流 (有 的 文档 里 面 称 之 为 的 普通 流 或 者 被 广泛 误 称 为 文档 流 ) 是 一 个 文档 在 被 显 
示 时 最 常见 的 布局 形态 。 一 个 框 ( 无 论 它 是 块 级 的 还 是 行内 的 ) 在 常规 流 中 必须 属于 一 个 
格式 化 上 下 文 (Formatting Context), 其 中 包含 块 级 格式 化 上 下 文 (Block Formating Context, 


简称 BFC) 和 行内 (inline) 格式 化 上 下 文 。 


块 级 格式 化 上 下 文 可 由 一 个 元 素来 定义 ， 其 他 元 素 在 这 个 元 素 所 定义 的 环境 中 必须 满 
足 一 些 特定 的 规则 。 比 如 一 个 div， 它 在 overflow 被 设置 为 hidden 的 情况 下 会 产生 一 个 块 


级 格式 化 上 下 文 : 


divl ( 
overflow: hidden; 


你 可 以 将 块 级 格式 化 上 下 文 想象 成 一 个 密封 的 大 箱子 ， 箱 子 外 边 的 元 素 将 不 与 箱子 内 


的 元 素 产 生 作 用 ， 此 时 在 该 div 中 的 元 素 将 会 呈现 出 如 下 的 特征 : 
O 外 边 距 将 不 再 与 上 下 文 之 外 的 元 素 折 车 。 

口 其 内 可 以 包含 浮动 元 素 。 

O 可 以 阻止 浮动 元 素 被 覆盖 〈 也 就 是 常 说 的 清除 浮动 ) 。 
口 


中 的 文字 将 不 会 环绕 邻接 的 浮动 盒子 排 布 ， 而 是 竖 直 排 布 


大 | 


接 一 个 的 垂直 放置 ) 。 


框 会 一 个 接 一 个 地 被 垂直 放置 , 它们 的 起 点 是 一 个 包含 块 的 顶部 。( 这 意味 着 BFC 


为 行 框 将 会 一 个 


那么 ， 如 何 才能 触发 块 级 格式 化 上 下 文 呢 ? 大 致 说 来 有 这 样 几 种 方式 : 


浮动 元 素 〈 浮 动 元 素 本 身 形 成 一 个 块 级 格式 化 上 下 文 ) 。 
行内 块 元 素 (display: inline-block) 。 


OOODODO A m 


overflow JE "visible" 的 元 素 〈 如 上 例 中 的 overflow: hidden) 。 
比如 下 面 的 例子 : 


* 100* 


表格 单元 格 和 标题 (display: table-cell 或 display: table-caption) 。 
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<div id-"sibling-box"»sibling-box«/div^ 
«div id-"bfc-box"» 

<div id-"float-box"»float-box«/div» 
«/div» 


以 及 CSS: 


d$sibling-box { 
border: 1px dotted #333; 
margin-bottom: 10px; 
height: 10px; 

ti 


#bfc-box { 
border: 1px solid #333; 
overflow: hidden; /* 清 除 浮动 的 作用 */ 
} 
#float-box ( 
float:left; 
margin-top: 20px; 
) 
泻 染 结果 将 如 图 3.13 所 示 。 
上 例 中 即使 这 些 box 没有 设置 边框 ， 且 没有 浮动 ，float-box 和 sibling-box 的 边 距 也 不 


会 折合 ， 功 劳 也 来 自 BFC: 


mEn 


#sibling-box { 
border: 1px dotted #333; 
margin-bottom: 10px; 
height: 10px; 

) 


d*bfc-box ( 
overflow: hidden; /* 清 除 浮动 的 作用 */ 
} 
#float-box { 
margin-top: 20px; 
) 


运行 后 的 效果 如 图 3.14 所 示 。 


sibling-box : 
30 
float-box + 
图 3.13 利用 BFC 清除 浮动 图 3.14 BFC 阻止 边 距 折 车 


块 级 格式 化 上 下 文 的 触发 方式 不 太 容易 记忆 ,在 CSS 3 中 对 BFC 的 概念 做 了 细微 改动 ， 
命名 为 flow root。 和 触发 方式 则 简单 而 直 白 地 描述 为 : 在 元 素 定 位 非 static 或 relative 的 情 
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况 下 触发 。 这 种 记 法 相对 来 说 更 加 简单 易 懂 一 浮动 其 实 也 算 一 种 定位 方式 。 


5. 浮动 (float) 


浮动 曾 是 一 种 神奇 的 布局 技术 ， 但 在 近 些 年 来 越 来 越 被 诉 病 ， 因 为 浮动 往往 会 导致 一 
些 意料 之 外 的 结果 ， 而 且 经 常 面 临 清除 浮动 的 痛苦 。 而 这 一 切 的 根源 在 于 : 浮动 最 初 本 不 
是 一 种 用 来 布局 的 技术 。 
浮动 框 会 脱离 常规 流 在 当前 行 向 左 或 者 向 右 漂移 ， 浮 动 框 外 的 行 框 可 以 沿 着 浮动 框 的 
边缘 进行 演 染 一 一 这 一 特性 可 以 用 来 实现 文字 环绕 图 片 这 样 的 效果 : 
<div> 
<span> 假 设 这 是 头像 </ span» 
<p> 
The IMG box is floated to the left. The content that follows is formatted 
to the 
right of the float, starting on the same line as the float. 


</p> 
</div> 


CSS: 


span { 
float: left; 
width: 50px; 
height: 50px; 
padding: 10px; 
margin: 10px; 
border: 1px dotted $333; 
) 
div ( 
border: 1px solid red; 
width: 200px; 
padding: 10px; 
) 


运行 后 的 效果 如 图 3.15 所 示 。 

如 果 你 想 将 右 侧 文字 竖 直 排列 ， 则 可 以 通过 触发 p 的 块 级 格式 化 上 下 文 来 实现 ， 因 为 
对 于 table 元 素 、 块 级 替换 元 素 或 者 在 常规 流 中 创建 了 块 格式 化 上 下 文 的 元 素 ,它们 的 border 
box 在 同一 个 块 格式 化 上 下 文中 不 能 覆盖 任何 浮动 元 素 。 在 有 足够 的 空间 情况 下 ， 也 可 以 
把 它 紧 临 浮动 元 素 放置 ， 否 者 放置 在 浮动 元 素 的 下 面 : 

pt 

overflow: hidden; 

) 

运行 后 的 效果 如 图 3.16 所 示 。 

浮动 框 在 定位 上 还 有 非常 多 的 细节 。 例 如 ， 同 方向 的 浮动 框 间 会 堆 苔 ， 浮 动 框 不 能 洪 
出 包含 块 ， 浮 动 框 不 影响 外 边 距 折合 等 。 不 过 这 些 特性 大 多 已 被 广大 前 端 人 士 所 熟知 ， 本 
书 的 重点 也 不 在 于 讲述 这 些 细节 。 
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xu The IMG box 
"ms is floated to 
, i the left. The 
iux The IMG box i ; content that 
mns is floated to follows is 
s the left. The formatted to 
| content that the right of 
follows is the float, 
formatted to the right of starting on 
the float, starting on the the same line 
same line as the float. as the float. 
图 3.15 浮动 图 3.16 浮动 与 BFC 


和 浮动 一 样 ， 绝 对 定位 也 是 一 种 脱离 文档 流 的 定位 方式 。 掌 握 它 的 诀 穹 在 于 明白 这 名 
话 : 绝对 定位 元 素 基于 包含 块 〈 不 一 定 是 父 元 素 ) 进行 定位 。 关 于 包含 块 的 判定 ， 前 文 已 
经 做 了 详细 叙述 ， 下 面 来 看 一 个 简单 的 例子 ; 


«div Style-"position:relative; width:300px; height:300px; 
background-color:silver; border:5px solid red;"» 
«div style-"width:100px; height:100px; background-color:blue;"»«/div» 
<div  style-"margin:0 0 0 100px; width:200px; height:200px; 
background-color:gold;"» 
<div style-"position:absolute; left:100px; top:100px; width:100px; 
height:100px; background-color:green;"» 
A 
«/div» 
«/div» 
«/div» 


运行 后 的 效果 如 图 3.17 所 示 。 


图 3.17 绝对 定位 


可 以 看 到 ，A 框 并 没有 相对 于 其 父 元 素 进行 定位 ， 而 是 相对 于 其 爷爷 级 元 素 进行 了 定 
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位 ， 原 因 就 在 于 它 和 爷爷 是 A 框 第 一 个 position 为 非 static 的 祖先 元 素 。 

另外 ，fixed 定位 其 实 是 absolute 定位 的 一 个 子 类 ， 它 相当 于 是 包含 块 为 可 视窗 口 的 绝 
对 定位 。 

可 视 化 格式 模型 的 内 容 还 包括 分 层 呈 现 CLayered presentation)、 双 向 文本 (bidi) 和 宽 
高 值 计算 等 内 容 ， 读 者 如 果 有 兴趣 可 以 阅读 CSS 2.1 文档 中 相关 的 章节 。 


324 表格 


表格 的 可 视 化 布局 包含 很 多 繁杂 的 内 容 ， 不 过 在 落实 到 应 用 时 ， 我 们 只 需要 记 住 这 样 
:个 要 点 便 可 以 打 凯 天 下 无 敌 表 。 


1. 表格 元 素 的 匿名 框 机制 
首先 看 下 面 一 个 表格 代码 : 


<table> 
<td>1 

</table> 

这 并 不 是 一 个 完整 的 表格 结构 ， 它 还 缺失 了 行 (tr) TH (tbody), X Cth) 和 行头 
组 (thead) 等 元 素 ， 但 是 这 个 非 完整 的 表格 会 生成 至 少 三 层 的 完整 结构 : table>tr>td。 这 
些 生 成 的 结构 都 是 由 匿名 框 构 成 (类 似 于 前 面 讲 到 的 行 匿名 框 )。 

对 于 一 个 完整 的 表格 结构 , 它 的 泻 染 结构 总 是 由 cell, row, row group. column, column 
group 和 table 这 六 个 部 分 组 成 ,并 且 在 逻辑 上 和 视觉 上 从 上 至 下 呈现 出 分 层 结构 ,如 图 3.18 
所 示 。 


row groups 


columns 


column groups 


图 3.18 表格 分 层 


每 一 层 都 由 不 同 的 匿名 框 构成 ， 在 指定 背景 时 ， 位 于 底层 的 背景 会 相应 穿 过 上 层 透 明 
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的 元 素 。 
2. 表格 的 布局 机 制 


表格 的 宽度 布局 算法 有 两 种 机 制 ， 一 种 是 固定 ， 一 种 是 自动 ， 可 以 使 用 table-layout 
属性 指定 (auto 或 fixed). 

所 谓 固定 算法 ， 是 指 的 水 平方 向 的 布局 〈 即 列 的 宽度 ) 不 受 具 体内 容 的 影响 ， 而 是 可 
以 通过 表格 宽度 和 列 宽 度 来 指定 。 而 自动 布局 算法 中 ， 列 的 宽度 是 由 列 单元 格 中 没有 折 行 
的 最 宽 的 内 容 设 定 的 。 

3. 表格 的 边框 


掌握 表格 边框 的 精髓 在 于 掌握 border-collapse 属性 。 
border-collapse 可 以 指定 两 种 表格 边框 模型 ， 一 种 是 边框 分 离 模型 (border-collapse: 
separate )， 在 这 种 模式 下 每 个 单元 格 以 及 table 本 身 的 边框 都 是 独立 的 ， 此 时 可 以 使 用 
border-spacing 属性 指定 单元 格 边框 之 间 的 距离 〈 水 平 或 者 垂直 )。 
table { border: outset 10pt; 
border-collapse: separate; 
border-spacing: 15pt } 
td ( border: inset 5pt ] 
td.first-cell ( border: inset 10pt } 


这 样 的 表格 最 终 效果 可 能 如 图 3.19 Bras o 


table-width 
vertical 
border-spacing 
and padding 
table border | —7 

(outset) 
vertical . 

cell border border-spacing 

(inset) 
cell width horizontal 


bordr-spacing 
图 3.19 边框 分 离 模型 


另 一 种 模型 叫做 边框 合并 模型 ， 使 用 border-collapse: collapse 来 指定 。 顾 名 思 义 ， 合 
并 模型 就 是 邻接 的 单元 格 以 及 表格 元 素 本 身 共享 同样 的 边框 。 上 例如 果 表 格 改 为 collapse， 
则 结果 可 能 是 这 样 的 ， 如 图 3.20 所 示 。 
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H 


图 3.20 边框 合并 模型 


可 以 看 到 ， 因 为 边框 被 合并 ，inset 和 outset 的 边框 将 不 再 适用 一 一 因为 这 种 类 型 的 边 
框 会 更 改 上 左 和 下 右 颜 色 的 深浅 ， 单 元 格 边框 设置 的 边框 效果 会 互相 窗 盖 ， 最 终 呈 现 出 奇 
怪 的 效果 。 


3.3 CSS 3 选择 器 增强 


CSS Selector Level 3 模块 在 CSS 2.1 的 基础 上 增加 了 很 多 选择 器 ， 这 些 选择 器 极 大 地 
增强 了 CSS 选择 器 的 表达 力 ， 简 化 了 在 许多 场景 下 CSS 开发 人 员 的 工作 。 
在 详细 讲解 他 们 之 前 ,我们 先 来 看 看 有 哪些 新 选择 器 被 引入 了 。 表 3-2 涵盖 了 所 有 CSS 
2.1 中 没有 而 CSS 3 中 新 增 的 选择 器 。 
表 3-2 CSS Level 3 新 增 选择 器 一 览 


选择 器 模式 简要 说 明 
E[foo^-"bar"] foo 属性 以 字符 串 bar 开头 的 下 元 素 (来 源 于 正则 表达 式 语 法 ) 
E[foo$="bar"] foo 属性 以 字符 串 bar 结尾 的 下 元 素 
E[foo*-"bar"] foo 属性 包含 字符 串 bar 的 E 元 素 
E:root 文档 根 元 素 ， 大 部 分 情况 下 只 能 用 于 匹配 html 元 素 本 身 
E:nth-child(n) 选择 相对 于 其 父 元 素 的 第 n 4 ES T7605 
E:nth-last-child(n) 选择 相对 于 其 父 元 素 的 倒数 第 n 个 E 类 型 子 元 素 
E:nth-of-type(n) 与 :nth-child0 作 用 类 似 ， 但 是 在 匹配 时 仅 计算 同 种 标签 的 元 素 
E:nth-last-of-type(n) 同 :nth-of-type 类 似 ， 倒 着 数 
E:first-child 等 价 于 E:nth-child(1) 
E:last-child 等 价 于 E:nth-last-child(1) 
E:first-of-type 等 价 于 E:nth-of-type(1) 
E:last-of-type 等 价 于 E:nth-last-of-type(1) 
E:only-child 当 王 是 其 父 元 素 的 唯一 子 元 素 时 
E:only-of-type 和 :only-child 类 似 ， 当 E 类 型 只 有 一 个 元 素 时 匹配 
E:empty 当 王 没有 子 元 素 时 匹配 〈 包 含 文本 元 素 ) 
E:target 当 ufl 中 使 用 锚 点 引用 了 页 面 的 对 象 时 ， 选 择 匹配 E 的 对 象 
E:enabled 二 
Edad 启用 或 者 禁用 了 的 UI 元 素 
E:checked 选择 了 的 UL 7625. 〈 比 如 checkbox EÈ radio button) 
E:not(s) 不 匹配 某 个 选择 器 的 王 元 素 
E 匹配 任何 在 EE 元 素 之 后 的 同 级 元 素 (E~F 和 E+F 的 不 同 在 于 后 者 只 能 选择 
紧邻 王 的 F) 
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3.3.1 属性 选择 器 的 妙用 


属性 选择 器 是 非常 好 用 的 设计 工具 , 尤其 是 在 组 织 代码 方面 , 假设 你 要 设计 一 套 icon， 
可 能 采用 sprite 技术 : 


-icon ( 
background-image: url(icon.png) 
width: 16px; 
height: 16px; 
} 
.icon-close { 
background-position: 0px 20px; 
H 
.icon-open { 
background-position: 0px 20px; 
} 


此 时 你 可 能 需要 这 样 使 用 这 些 class: 
<span class="icon icon-close"></span> 
但 实际 上 ， 你 可 以 使 用 属性 选择 器 来 让 代码 变 得 更 简单 : 
[class^-"icon-"] ( 
background-image: url(icon.png) 
width: 16px; 


height: 16px; 
) 


iX FÉ HTML 也 会 变 得 更 简单 : 

<span class="icon-close"></span> 

属性 选择 器 也 可 以 多 个 组 合 使 用 ， 已 达到 某 些 常见 的 目的 : 

/* 对 某 根 域 下 所 有 安全 链接 增加 安全 标识 */ 

a[href^-"https://"] [href*-"example.com"]:before ( 
content: '" [safe] 


color: green; 


F 


3.3.2 ”强大 的 结构 性 伪 类 (Structural pseudo-classes) 


结构 性 伪 类 非常 实用 ， 它 的 推出 在 开发 人 员 和 设计 师 们 中 大 受 欢迎 。 
/* 选择 第 五 个 列表 项 */ 
li:nth-child(5){ 

color: green; 


} 
nth-child(m) 中 的 n 不 一 定 非 得 是 数字 ， 也 可 以 是 表达 式 : 
/* 选择 从 第 六 个 1i 起 到 最 后 一 个 1i */ 
li:nth-child(n*6) ( 

background: #ccc; 


} 
s 8075 
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/* 选择 第 1、3、6、9.. 个 元 素 */ 
li:nth-child(3n) { 
} 


甚至 还 有 预 设 的 字符 串 : 


/* 选择 第 偶数 个 元 素 */ 
li:nth-child(odd) ( 
) 
:nth-last-child 也 是 类 似 的 用 法 ， 只 不 过 是 倒 过 来 数 ， 比 较 容 易 摘 混 淆 的 是 :nth-child 
和 :nth-of-type 两 个 伪 类 。 我 们 以 下 面 这 个 例子 来 说 明 它 们 的 区 别 : 
«section» 
<h1> 这 里 是 section 下 第 一 个 子 元 素 </h1> 
<p> 这 里 是 section 下 第 一 个 p 元 素 </p> 
<p> 这 里 是 section 下 第 二 个 p 元素 </p> 
</section> 


此 时 这 样 的 选择 器 : 
section p:nth-child(2) { /* section 下 的 第 二 个 子 元 素 ， 且 该 元 素 为 p */ 


text-decorate:underline; 

) 

section p:nth-of-type(2) ( /* section 下 的 所 有 p 元 素 中 的 第 二 个 */ 
font-size:1.2em 


最 终结 果 如 图 3.21 所 示 。 

结构 性 伪 类 选择 器 中 和 前 面 类 似 的 还 这 里 是 section 下 第 一 个 子 元 素 
有 :first-child 和 :first-of-type SF, 以 及 其 相应 的 last 这 里 是 section 下 第 一 个 p 元 素 
版 本 。 善 用 这 些 选择 器 能 解决 很 多 设计 上 的 难题 ， 、 NUR 
也 不 必 污染 html 代码 , 更 好 地 践 行内 容 和 表现 分 “这 里 是 section 下 第 一 个 P 元 素 
离 的 思想 。 图 3.21 nth-of-type 与 nth-child 的 区 别 


3.88 ”其 他 选择 器 


比较 有 趣 的 是 :target 选择 器 ， 它 会 在 锚 定 页 面 元 素 的 时 候 起 作用 〈 即 页 面 hash 指定 了 
页 面 某 元 素 的 id 时 ): 


«section id-"voters"» 
Content 
«/section» 


CSS: 


:target { 
background: yellow; 
J 
此 时 如 果 访 问 该 页 面 的 section 元 素 (如 http:/www.example.com/#voters), 则 该 section 
素 会 呈现 黄色 的 背景 。 
通常 :target 选择 器 可 以 用 于 可 视 化 页 面 内 跳 转 行为 、 标 识 历 史 状 态 和 高 亮 区 块 等 场景 。 
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3.3.4 CSS 4 中 的 选择 器 


即便 在 CSS 2 PERE, CSS 3 尚 处 萌芽 之 时 ，CSS 4 的 选择 器 就 已 经 初 见 端 倪 了 。 
CSS 4 选择 器 相 较 于 CSS 3 选择 器 功能 更 强 , 在 UI 组 件 方面 ， 露 出 了 对 交互 行为 进行 统一 
的 野心 ， 在 可 用 性 方面 也 进行 了 优化 ， 如 表 3-3 所 示 。 


表 3-3 CSS 4 选择 器 


选择 器 模式 简要 说 明 
E:not(sl, s2) 相 比 CSS 3, :not 选择 器 现在 可 以 匹配 多 个 子 选择 器 了 
E:matches(sl,s2)  |:not 的 反面 一 一 即 仅 选择 匹配 子 选择 器 的 下 元 素 
E[foo-"bar"i] 忽略 大 小 写 的 属性 选择 器 
E:any-link 所 有 链接 行为 的 下 元 素 (如 <div src="xx" ></div>) 
E:local-link 当前 文档 内 的 链接 
E:local-link(0) 当前 域内 的 链接 


E:current 
E:past 
E:future 


时 间 维 CTime-dimensional) 伪 类 ， 可 以 选择 正在 〈 或 过 去 未 来 ) 被 屏幕 阅读 器 
阅读 的 内 容 


E:indeterminate 
E:default 
E:in-range 
E:out-of-range 
E:required 
E:optional 
E:read-only 
E:read-write 

E /foo/ F 选中 的 所 有 下 里 ID 值 与 E 元 素 的 foo 属性 值 相等 的 
E!>F 神奇 的 父 选 择 器 ， 这 时 候 会 选择 E， 而 非 


UI 组 件 各 种 状态 的 选择 器 


CSS 4 的 选择 器 截止 到 目前 在 W3C 还 处 于 工作 草案 阶段 , 截止 到 撰 稿 时 也 没有 任何 浏 
览 器 支持 它们 ， 因 此 这 里 只 大 致 介绍 一 下 它们 。 

幸运 的 是 CSS 3 选择 已 被 绝 大 部 分 浏览 器 完美 支持 ， 尤 其 在 移动 设备 上 更 是 如 此 ， 因 
此 你 可 以 放心 使 用 CSS 3 的 选择 器 ， 在 绝 大 多 数 场景 CSS 3 选择 器 都 是 够 用 而 且 好 用 的 。 


34 ”和 图 片 说 再 见 


CSS 3 备 受 推崇 的 一 个 重要 原因 便 是 它 解放 了 设计 师 , 对 于 各 种 视觉 效果 甚至 特效 CSS 3 
处 理 起 来 都 游 思 有余 。 可 以 毫 不 夸张 的 说 ， 有 了 CSS 3， 设 计 师 (或 者 常年 充当 伪 设 计 师 的 
前 端 工程 师 们 ) 可 以 和 讨厌 的 图 片 说 拜拜 了 。 
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在 过 去 ， 使 用 图 片 进行 UI 设计 是 常见 且 别 无 他 选 的 做 法 ， 那 时 候 设备 简单 (就 需要 
考虑 桌面 显示 器 )， 用 户 的 需求 也 很 简单 。 

随 着 时 代 变 迁 ， 用 户 对 网 站 速度 要 求 越 来 越 高 ， 用 户 访问 网 页 的 设备 也 越 来 越 丰富 。 
由 于 图 片 非常 消耗 网 络 资源 (一 个 小 小 的 按钮 图 片 就 可 能 重 达 儿 十 KB)， 自 然 容易 拖累 整 
个 页 面 的 加 载 速 度 ， 在 桌面 版 还 好 ， 但 对 于 寸 流量 寸 金 的 移动 版 网 页 ， 你 不 得 不 精简 每 一 
处 网 络 和 资源 开销 ， 加 上 retina 屏幕 的 大 热 ， 使 用 图 片 来 做 UI 设计 还 得 做 两 套 甚至 多 套 不 
同 分 辨 率 的 图 片 来 进行 适应 ， 给 工程 师 和 设计 师 都 带 来 了 不 小 的 麻烦 。CSS 3 中 出 现 的 很 
多 新 功能 在 近 两 年 极 大 降低 了 图 片 在 UI 设计 中 的 使 用 率 ， 背 景 、 控 件 和 图 标 都 可 以 使 用 
非 图 片 技术 来 完成 ， 而 且 能 做 到 更 好 的 适应 性 ， 更 好 的 网 站 性 能 。 


3.4.1 背景 和 边框 


每 一 个 盒子 都 可 以 拥有 一 个 背景 ， 依 靠背 景 ， 我 们 可 以 为 网 页 点 缀 怡 人 的 花色 ， 为 重 
要 区 块 标 上 醒目 的 高 亮 ， 制 作 漂亮 的 控件 等 等 。 在 过 去 ， 类似 图 3.22 的 圆 角 按钮 设计 一 度 
层出不穷 (直到 现在 也 是 ): 

通常 的 实现 方式 是 让 设计 师 制作 一 张 固定 大 小 的 图 片 ， 然 后 将 a 标签 display 为 block 
(或 者 inline-block), 设置 其 宽 高 , 并 设置 背景 为 这 张 图 片 一 一 这 种 做 法 的 缺点 是 很 明显 的 ， 
按钮 的 大 小 没 法 改变 ， 如 果 要 装 别 的 字 儿 按钮 就 又 得 重新 设计 一 张 图 。 后 来 人 们 又 发 明了 
更 加 聪明 的 做 法 ， 将 按钮 分 割 成 如 图 3.23 所 示 的 三 个 部 分 。 


Cy CT 


图 3.22 Web 1.0 时 代 的 按钮 图 3.23 ”分割 图 片 以 自 适应 


左右 两 个 部 分 使 用 两 个 单独 的 标记 (如 span)， 并 分 别 设置 它们 的 背景 ， 中 间 的 部 分 
在 水 平方 向 是 重复 的 ， 因 此 可 以 垂直 切 出 一 缁 一 像素 的 图 ， 然 后 使 用 
background-repeat:repeat-x 将 中 间 部 分 重复 堆 辣 ， 这样 其 内 的 文字 可 以 实现 自 适应 。 背景 重 
复 技术 被 广泛 用 于 网 页 项 栏 、 背 景 纹 理 和 按钮 进度 条 等 设计 需求 。 这 种 方法 的 缺点 也 很 明 
显 ， 你 得 使 用 三 个 标签 才能 实现 一 个 按钮 。 

iPhone 出 现 后 , 圆 角 和 矩形 的 设计 更 是 泛滥 了 整个 UU 设计 界 。 按 钮 .图 片 框 和 文本 框 …… 
我 们 所 能 见 到 的 网 页 处 处 充斥 着 圆 角 。 还 好 CSS 3 提供 了 border-radius 这 个 强大 的 属性 ， 
让 圆 角 变 得 如 此 简单 : 

div ( 

border: 1px solid faaa; 
border-radius: 12px; /* 指定 圆 角 半径 X 12px */ 
width: 71px; 
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height: 71px; 

} 

一 个 标准 的 72X72 (不 要 忘 了 边框 的 1 像素 ) iPad 图 标 诞生 了 ， 
如 图 3.24 所 示 。 
可 以 看 到 border-radius 用 法 非常 简单 。 和 padding 等 属性 类 似 ， 
border-radius 也 可 以 指定 多 个 值 以 分 别 对 左上 、 右 上 、 右 下 和 左下 的 
辕 角 半径 进行 设置 ; 

border-top-left-radius: 2px; 

border-top-right-radius: 20px; 

border-bottom-right-radius: 50$; 

border-bottom-left-radius: 2em; 

和 padding, margin 一 样 ， 可 以 简写 为 : 

border-radius: 2px 20px 50$ 2em; 


如 图 3.25 所 示 。 

更 加 有 趣 的 是 ，border-radius 不 仅仅 可 以 指定 圆 角 半径 ， 还 可 以 在 前 面 的 值 的 基础 上 ， 
以 斜 线 分 割 指定 第 二 组 值 (也 是 1~4 个 值 构 成 )， 进 而 得 到 一 段 椭圆 的 弧 〈 第 二 组 值 仅 指 
定 垂 直方 向 上 的 半径 ): 


border-radius: 2px / 20px; 


图 3.24 border-radius 


如 图 3.26 所 示 。 


图 3.25 border-radius 分 别 设 值 ^ 图 3.26 ”以 椭圆 弧度 设置 圆 角 


看 一 个 复杂 点 的 例子 : 


border-radius: 10px 20px 60px 100px / 40px 20px 30px 50px; 


运行 效果 如 图 3.27 和 图 3.28 所 示 。 

善 用 圆 角 值 可 以 搭配 出 各 种 类 型 的 边框 效果 。 

在 背景 方面 (background)，CSS 3 也 有 许多 人 性 化 的 增强 ，background 是 网 页 设计 中 
最 重要 的 技术 ， 利 用 它 可 以 将 设计 元 素 (颜色 、 光 影 和 图 像 ) 与 页 面 元 素 连接 起 来 。 
background 可 以 设置 多 达 八 个 种 类 的 值 ， 可 以 将 它们 简写 至 background 属性 之 中 : 
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图 3.27 椭圆 圆 角 图 3.28 两 组 值 的 详细 标注 


-topbanner { 
background: url("topbanner.png") #00D repeat-y -10px -40px fixed; 


) 
这 八 个 种 类 的 详情 可 以 看 表 3-4 所 示 。 
表 3-4 8 个 种 类 的 属性 


属 性 功 能 CSS 3 新 增 ? 

background-color 设置 背景 色 
background-image 设置 背景 图 片 
background-position 
background-size 是 
background-repeat t 

ET 2 de ELE ar 不 去 " 
background-attachment ilia E : 如 fixed 表示 表 景 固定 不 动 ，scrol 则 随 页 
background-clip 背景 裁剪 起 始 区 域 是 
background-origin : 制 起 始 区 域 是 


CSS 2 中 定义 的 background 属性 我 们 应 该 都 很 熟悉 了 ， 现 在 我 们 着 重 讲 一 下 CSS3 新 
增 的 几 个 属性 。 
background-size 是 一 个 非常 棒 的 功能 ， 它 可 以 方便 地 设置 背景 图 的 大 小 以 实现 图 片 拉 
伸 效果 : 
区 | 
background-size: 300px 100px; /* 设置 背景 为 固定 大 小 , 不 管 背景 图 原始 大 小 */ 


} 
.div2 ( 
background-size: 40$ 80$; /* 宽度 和 高 度 分 别 是 容器 元 素 的 A0S RI 80S */ 


li 


background-size 属性 还 有 两 个 非常 有 用 的 关键 字 预 设 值 : cover 和 contain. cover 用 于 
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等 比 扩展 图 片 来 填 满 元 素 ， 即 用 图 片 覆 盖 (cover) 住 元 素 。contain 则 是 等 比 缩小 图 片 来 适 
应 元 素 ， 即 让 元 素 容 纳 Ccontaim) 整个 图 片 。 图 3.29 展示 了 两 者 的 区 别 。 


background-size:cover; 


GILO 
Google a 


图 3.29 background-size 预 设 关 键 字 


background-origin 和 background-clip 是 一 对 不 能 分 割 的 情侣 ， 甚 至 他 们 的 取 值 选项 都 
是 一 样 的 。background-origin 用 于 指定 背景 绘制 时 的 起 始 区 域 ， 它 可 以 指定 border-box、 
padding-box 和 content-box 这 几 个 值 : 
div( 
background: url('logo4w.png') no-repeat; 
width:800px; 
height:100px; 
padding: 20px; 
border:10px dotted #aaa; 
i 


与 框 模型 对 应 ，border-box 指 从 边框 开始 计算 背景 起 始 位 置 ， 其 效果 如 图 3.30 所 示 。 


background-origin: border-box; 


content-box 〈 排 除 所 有 边框 和 内 边 距 ) 的 效果 ， 如 图 3.31 所 示 。 


图 3.30 background-origin:border-box 图 3.31  background-origin:content-box 
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background-clip 则 用 于 指定 背景 从 何 处 裁剪 ， 取 值 也 是 border-box, content-box 和 
padding-box。 前 面 关 于 background-origin 的 第 一 个 例子 如 果 将 background-clip 设置 为 
content-box 则 会 呈现 图 3.32 的 效果 。 


- 
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图 3.32. background-clip 示意 


background-origin 和 background-clip 在 很 多 场景 下 都 是 非常 方便 的 工具 。 例 如 ， 指 定 
控件 〈 如 按钮 ) 的 背景 时 ， 因 为 行 高 的 原因 ， 你 可 能 并 不 想 背景 覆盖 住 元 素 padding。 


3.4.2 渐变 和 阴影 


渐变 和 阴影 可 能 是 PhotoShop 软件 中 最 火 的 两 种 设计 元 素 了 。 得 益 于 CSS 3， 渐 变 和 
阴影 终于 被 落实 在 了 标准 文档 里 一 一 更 重要 的 是 ， 现 代 浏 览 器 都 支持 它们 ! 


1， 渐 变 


在 PhotoShop 中 ， 渐 变 工具 提供 了 五 种 类 型 的 渐变 ， 分 别 是 线性 渐变 、 径 向 渐变 、 角 
度 渐变 、 对 称 渐变 和 菱形 渐变 。 在 CSS 中 ， 渐 变 没有 PhotoShop 里 那么 复杂 ， 但 是 通过 适 
当 的 组 合 依然 可 以 获得 非常 惊艳 的 效果 。 

CSS 3 中 渐变 数据 类 型 (和 颜色 rgba 等 函数 类 似 ) 是 以 函数 形式 实现 的 。 例 如 ， 线 性 
渐变 就 是 一 个 名 为 linear-gradient() 的 函数 ， 该 函数 会 返回 一 个 
<gradien 忆 数据 类 型 (同时 可 以 看 作 是 CSS 中 image 的 子 类 
型 )， 如 : 

background: linear-gradient(to bottom, black, 

white) 

就 构建 了 一 个 从 上 至 下 ， 从 黑 到 白 的 线性 渐变 ， 如 图 3.33 
所 示 。 

截止 到 本 书 撰写 时 ，webkit 内 核 的 浏览 器 还 没有 去 掉 其 前 
级 -webkit-, 语 法 也 和 新 标准 语法 不 太一 样 .要 在 Chrome 或 Safari 图 3.33 linear-gradient 
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中 实现 上 面 的 渐变 效果 ， 需 要 如 下 的 代码 : 


background: -webkit-linear-gradient (top, black, white); 


在 webkit 中 ，to 方向 的 语法 被 简洁 地 实现 为 (from) 方向 ， 除 了 top 这 个 关键 字 外 ， 
聪明 的 你 应 该 很 容易 想到 还 有 bottom. left 和 right 几 个 值 ， 如 图 3.34 所 示 。 


mE 3 


图 3.34 bottom, left 和 right 的 渐变 
除了 这 四 个 方向 ， 也 可 以 通过 指定 具体 的 角度 数 ， 单 位 为 deg〈 度 )， 如 图 3.35 所 示 。 


图 3.35 指定 角度 的 渐变 


#div1 ( 


background: -webkit-linear-gradient (45deg, black, white); 
} 
#div2 { 


background: -webkit-linear-gradient (-45deg, black, white); 
) 
#div3 ( 


background: -webkit-linear-gradient (120deg, black, white); 
) 


第 一 个 参数 省 略 时 渐变 默认 从 上 往 下 泻 染 ， 同 时 你 也 可 以 指定 两 种 以 上 的 颜色 ， 如 图 


3.36 所 示 。 


图 3.36 多 颜色 渐变 
#div1 { 


background: -webkit-linear-gradient (black, white, gray); 
} 
#div2 { 


background: -webkit-linear-gradient (gray, black, white); 
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} 
#div3 ( 

background: -webkit-linear-gradient (gray, black, white, gray); 
ji 


每 一 个 有 逗号 分 割 开 来 的 颜色 值 也 可 以 紧 跟 一 个 颜色 终止 值 Color stops)， 通 常 可 以 指 


定 为 一 个 百分比 : 
background: -webkit-linear-gradient(top, black 20$, white 805); 


运行 后 的 效果 如 图 3.37 所 示 。 


如 果 没 指定 ， 则 颜色 终止 会 取 设 定 颜色 的 中 位 值 〈( 即 颜色 变化 均匀 分 布 的 )， 如 果 为 
和 矩形 渐变 设置 了 角度 ， 则 颜色 的 起 始 位 置 和 终止 位 置 的 计算 将 进行 相应 的 变化 ， 变 化 过 程 


具体 如 何 可 以 参见 图 3.38 所 示 。 


起 始点 


二 页 点 
结束 点 


图 3.37 color stops 图 3.38 带 角 度 渐变 的 计算 
附 上 线性 渐变 的 语法 : 
linear-gradient( [ «angle» | to «side-or-corner» ,]? «color-stop» [, 
Xcolor-stop»]* ) 
Xside-or-corner» = [left | right] 11 [top | bottom] 
Xcolor-stop» = «color» [ «percentage» | «length» ]? 


AFE: 如 果 你 经 常 使 用 mozilla developer network 或 者 查阅 W3C 的 
文档 ， 你 会 发 现 上 文 这 种 语法 格式 非常 常见 ， 这 是 一 种 标准 
的 语法 文档 格式 ， 和 正则 表达 式 的 文法 非常 类 似 : * 表 示 0 
个 或 多 个 ，+ 表 示 1 个 或 多 个 ，? 表 示 0 或 一 个 ，[] 表 示 可 选 
的 分 组 ，| 表 示 或 ， 失 括号 (—) 括 起 来 表示 一 种 CSS 类 型 ， 
否则 表示 字面 量 。 


CSS 3 中 的 另 一 种 渐变 是 径 向 渐变 。 径 向 渐变 是 以 圆心 为 起 始点 ，。 maso AHNE 


向 外 发 散 的 一 种 渐变 ， 如 图 3.39 所 示 。 


background-image: -webkit-radial-gradient(circle, black, white); 
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径 向 渐变 和 线性 渐变 类 似 ， 也 可 以 指定 不 同 的 方向 和 多 个 颜色 〈 及 终止 值 ): 


-divi ( 

background-image: -webkit-radial-gradient(top, circle, black, white); 
} 
-div2 ( 

background-image:  -webkit-radial-gradient(circle, black, white 20$, 
gray); 
T 
-div3 ( 

background-image: -webkit-radial-gradient (bottom, circle, black, gray 20$, 
black 40$ ,white 602); 
i 


运行 后 的 效果 如 图 3.40 Pros o 


T m 


图 3.40 径 向 渐变 


circle 类 型 的 径 向 渐变 表示 渐变 呈正 圆 ， 相 应 的 也 有 ellipse 类 型 的 渐变 ， 适 合 在 非 正 
方形 的 盒 内 使 用 : 


er e i 
background-image: -webkit-radial-gradient (ellipse, red, yellow 10%, 
#1E90FF 50%, white); 
} 
-div2 f 


background-image:  -webkit-radial-gradient(circle, red, yellow 10%, 
#1E90FF 50%, white); 
} 


运行 后 的 效果 如 图 3.41 所 示 。 


m 


T 


图 3.41 ellipse 和 circle 


此 外 ， 径 向 渐变 的 尺寸 还 可 以 用 farthest-corner (最 远 的 角 ) 和 closest-side (最 近 的 边 ) 
两 个 关键 字 来 控制 : 


-divl ( 
background-image: -webkit-radial-gradient(circle farthest-corner, red, 
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yellow 10$, #1E90FF 50$, white); 
i 
.div2 ( 
background-image:  -webkit-radial-gradient (circle 
yellow 10$, #1E90FF 50$, white); 
) 


closest-side, red, 


运行 后 的 效果 如 图 3.42 所 示 。 


图 3.42 径 向 渐变 尺寸 


径 向 渐变 和 线性 渐变 都 不 会 自动 重复 ， 还 好 有 repeating-linear-gradient 和 
repeating-radial-gradient 属性 提供 了 重复 渐变 ， 这 样 可 以 轻松 实现 条 纹 的 效果 : 
vi 
background-image: -webkit-repeating-linear-gradient (-45deg, black, 
black 5px, white 5px, white 10px); 


} 
a 


background-image: -webkit-repeating-radial-gradient (circle, black 


black 5px, white 5px, white 10px); 


) 
运行 后 的 效果 如 图 3.43 所 示 。 
图 3.43 “利用 重复 渐变 实现 条 纹 


组 合 使 用 多 个 渐变 甚至 可 以 实现 华丽 的 床单 效果 : 
background-image: 


-webkit-repeating-linear-gradient(90deg, transparent, transparent 50px, 
rgba(255, 127, 0, 0.25) 50px, rgba (255, 127, 0, 0.25) 56px, transparent 
56px, transparent 63px, 
rgba(255, 127, 0, 0.25) 63px, rgba (255, 127, 0, 0.25) 69px, transparent 
69px, transparent 116px, 


rgba (255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), 
-webkit-repeating-linear-gradient(O0deg, transparent, transparent 50px, 
rgba(255, 127, 0, 0.25) 50px, 
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rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, 
zgba(255 127, 0; 0-25) 63px, 

rgba (255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, 
rgba({255, 206, 0, 0-25} 1 T6px; 

rgba (255, 206, 0, 0.25) 166px), 
-webkit-repeating-linear-gradient (-45deg, transparent, transparent 5px, 
xgba(143 ie 63; 0225) SPX, 

rgba(143, 77, 63, 0.25} 10px), 
-webkit-repeating-linear-gradient(45deg, transparent, transparent 5px, 
rgba(143, 77, 63, 0.25) 5px, 

rgba(143, 77, 63, 0.25) 10px); 


运行 后 的 效果 如 图 3.44 所 示 。 


2 


图 3.44 条 纹 床单 


2. 阴影 


说 完 渐 变 ， 再 来 说 说 阴影 。CSS 阴影 一 般 说 来 包括 两 类 ， 一 类 是 文字 阴影 ， 另 一 类 是 
盒 阴 影 。 文 字 阴 影 由 text-shadow 属性 来 设置 ,白色 的 字 套 上 简单 的 一 层 带 高 斯 模糊 的 黑色 
阴影 就 可 以 产生 常见 的 立体 字 效 果 : 


text-shadow:lpx lpx 4px gray; 


运行 后 的 效果 如 图 3.45 所 示 。 
其 中 ， 第 一 和 二 个 值 表示 阴影 在 X 和 YY 方向 上 的 位 移 ， 第 三 个 值 表示 模糊 (blur) 的 
半径 ， 最 后 一 个 表示 阴影 的 颜色 。 
同样 的 文字 可 以 设置 多 个 阴影 ， 每 组 阴影 值 由 逗号 隔 开 ， 通 过 多 个 阴影 的 配合 ， 可 以 
实现 一 些 有 趣 的 效果 。 比 如 组 合 四 个 不 同方 向 的 阴影 ， 可 以 实现 空心 字 的 效果 : 
text-shadow:-lpx 0px 0px gray, 
1px Opx 0px gray, 


Opx 1px 0px gray, 
Opx -1lpx Op% gray; 


运行 后 的 效果 如 图 3.46 所 示 。 
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图 3.45 text-shadow 图 3.46 多 个 text-shadow 


除了 文本 阴影 ， 还 有 一 种 阴影 是 盒 阴 影 (box-shadow)。 盒 阴影 和 文本 阴影 非常 类 似 ， 
不 过 它 的 作用 对 象 不 是 文字 而 是 页 面 中 的 框 〈《 可 以 是 行内 框 也 可 以 是 块 框 ): 


-divi ( 
display: inline; 
box-shadow:3px 2px gray; 
h 
-div2 ( 
box-shadow:3px 2px 5px gray; 
li 


运行 后 的 效果 如 图 3.47 Pros o 
盒 阴 影 的 形状 与 盒子 的 形状 有 关 ， 而 且 加 上 inset 关键 字 可 以 实现 内 阴影 


border-radius: 5em/2em; 
box-shadow: 1px lpx 5px gray, -lpx -lpx 5px gray inset; 


运行 后 的 效果 如 图 3.48 所 示 。 


一 一 


图 3.47 AHE 图 3.48 内 阴影 


光 说 不 练 假 把 式 ， 还 是 来 一 个 使 用 渐变 和 阴影 的 真实 案例 吧 ! 渐变 在 视觉 上 可 以 产生 
强烈 的 透视 感 和 空间 感 ， 被 广泛 用 在 各 种 设计 场景 中 ， 比 如 最 最 常见 的 立体 按钮 : 


:btn { 

/* 渐变 函数 返回 css image 类 型 */ 

background-image: -webkit-linear-gradient(top, #adda4d, #86b846); 

text-shadow: 0 1px 0px rgba(255,255,255,.3); /* 加 上 亮色 的 半 透 文字 阴影 ， 可 以 
让 文字 有 内 凹 感 */ 

border: 1px solid #6d8f29; 

color: #3e5e00 !'important; 

min-width: 56px; 

width: auto; 

border-radius:8px; 

-webkit-appearance: none; /* 去 掉 webkit 内 核 预定 义 的 控件 样式 */ 

display:inline-block; 

padding:4px 8px; 
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运行 后 的 效果 如 图 3.49 所 示 。 
如 果 为 按钮 加 上 一 点 内 外 阴影 ， 立 体 效果 会 更 加 显著 : 


box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,0 1px 0 rgba(0,0,0,.2); 


为 了 确保 它 在 尽 可 能 多 的 浏览 器 中 ， 如 图 3.50 所 示 。 


图 3.49 按钮 图 3.50 按钮 
一 个 能 被 按 下 的 按钮 的 设计 自然 不 应 少 了 被 按 下 的 状态 : 


.btn:active { 
/* 在 背景 颜色 上 变 深 ， 渐 变 幅 度 变 小 ， 以 及 一 定 程度 的 内 阴影 可 以 实现 按钮 被 按 下 的 光影 效果 */ 
background: -webkit-linear-gradient (top, #9ac244, #78a53e); 
box-shadow: 0 1px 2px rgba(0,0,0,.3) inset; 

) 


运行 后 的 效果 如 图 3.51 所 示 。 


图 3.51 按钮 状态 


QFE: 渐变 和 阴影 虽然 在 移动 设备 上 被 广泛 支持 ， 但 是 由 于 阴影 和 渐变 的 泻 染 非常 的 耗 
费 CPU 资源 ， 因 此 对 于 移动 应 用 应 该 尽量 少 用 这 些 设计 元 素 。 


3.4.3 自 定义 字体 


之 所 以 把 自 定 义 字体 单独 拿 出 来 讲 ， 是 因为 现在 自 定义 字体 除了 能 丰富 网 站 阅读 体 
验 ， 更 重要 的 是 可 以 很 大 程度 上 替代 图 片 的 使 用 。 

早 几 年 间 , 无 论 是 软件 还 是 网 站 的 图 标 设计 都 走 的 是 拟 物化 和 卡通 化 路 线 , 如 图 3.52 所 示 。 

近 两 年 图 标 设计 界 中 流行 元 素 越 来 越 趋向 于 简洁 和 扁平 化 ， 如 图 3.53 所 示 。 
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图 3.52 早年 间 的 图 标 设计 图 3.53 近 两 年 的 图 标 设计 
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正 是 这 样 的 流行 趋势 使 得 自 定义 字体 能 在 网 页 设计 中 大 放 异彩 ， 比 如 github 所 有 的 图 
标 都 是 使 用 自 定 义 字 体 实现 的 ， 如 图 3.54 所 示 。 

用 自 定义 字体 实现 图 标 有 几 个 明显 的 好 处 : # flo Ẹ X P 
口 字体 文件 小 ， 相 比 图 片 更 省 网 络 资源 。 

O 字体 是 矢量 元 素 ， 且 尺寸 和 颜色 都 可 以 使 用 


CSS 控制 ， 可 以 更 加 高 效 方便 地 构建 皮肤 系 A News Feed 
统 。 同 是 矢量 的 原因 ， 图 标 缩放 自如 ， 完 美 适 
配 retina 屏幕 。 图 3.54 github 的 图 标 


O 兼容 性 好 (甚至 包括 下 6) 。 
那么 如 何 实现 呢 ? 绘制 图 标 和 制作 字体 的 过 程 你 可 能 需要 用 到 PhotoShop、illustrator 
和 FontLab 等 软件 ， 这 是 属于 设计 师 们 的 工作 ， 在 这 里 不 做 更 多 详细 说 明 。 假 设 我 们 现在 
有 这 样 一 个 tt 格式 的 iconttf 字 体 文件 ， 那 么 我 们 先 要 利用 @font-face 规则 rule). 声明 一 
种 字体 : 
Gfont-face { 
/* 指定 字体 的 名 字 */ 
font-family: 'myfont'; 
/* 指定 字体 文件 的 路 径 */ 


sro DTL constbE9 


声明 好 字体 后 ， 便 可 以 在 各 种 地 方 使 用 它 了 : 


h2 { 
font-family: 'myfont'; 
à 


如 果 元 素 中 出 现 了 定义 的 字体 中 没有 的 字符 ， 那 么 会 fallback 到 系统 默认 字体 进行 显 
示 。 自 定义 字体 在 用 作 图 标 时 ， 更 多 是 配合 伪 元 素 content 属性 来 实现 : 


-icon-home { 

display: inline-block; 

width:l6px; 

height:l6px; /* 元 素 本 身 设置 宽 高 用 于 占 位 */ 
.icon-home:after { 

font-family: 'myfont'; 

width:16px; 


height:l6px; /* 元 素 本 身 设置 宽 高 用 于 占 位 */ 
margin-left: -16px; /* 向 左 移动 16px, 使 得 字符 正好 填充 原始 元 素 */ 
content: 'M£24f'; /* 这 里 可 以 使 用 unicode 编码 ， 也 可 以 使 用 具体 的 字 


符 ， 这 取决 于 你 字体 文件 中 字形 的 具体 字符 是 什么 */ 
) 


对 于 大 部 分 前 端 工程 师 而 言 ， 并 没有 太 多 功夫 或 者 能 力 去 设计 和 制作 自己 想 用 的 字体 
图 标 ， 得 益 于 开源 世界 的 馈赠 。 几 乎 绝 大 部 分 在 开发 一 个 网 站 或 应 用 所 会 用 到 的 图 标 ， 都 
有 合适 的 且 免 费 的 方案 ,在 这 里 推荐 一 个 github 上 热门 的 字体 项 目 Font Awesome， 它 包含 
了 所 有 bootstrap 项 目 中 的 图 标 和 其 他 额外 总 计 249 个 图 标 ， 甚 至 还 包含 附 赠 一 些 带 有 动画 
效果 的 字体 样式 ， 如 图 3.55 所 示 。 


«1225 


第 3 章 初探 CSS 3 


© icon-cloud-download d 
& icon-cloud-upload 9 
Q^  icon-ightbulb [ 
=æ icon-exchange 
A icon-bell-alt 


图 3.55 font awesome Jii H 
更 多 关于 font awesome 的 内 容 可 参见 http://fortawesome.github.com/Font-Awesome. 


AFE: 自 定义 字体 的 文字 多 用 于 广告 海报 、 艺 术 字 和 标题 字 等 设计 场景 ， 欧 美国 家 在 字 
体 设计 方面 有 着 先天 的 优势 一 英文 字母 一 共 就 26 个 , 即便 算 上 大 小 写 数字 特殊 
字符 也 才 一 共 100 来 个 字形 (其 他 西欧 文字 也 类 似 ) 。 而 对 于 以 咱们 国家 (以 及 
其 他 使 用 CK 文字 的 国家 ) 为 代表 的 象形 文字 因为 字符 集 庞大 , 动 辑 上 万 字 的 字 
符 量 使 得 开发 一 种 新 字体 的 工作 量 会 异常 巨大 ,所 以 时 至 今日 中 文字 体 也 没有 太 
多 品种 可 供 选 择 ， 万 幸 的 是 现在 已 经 有 越 来 越 多 的 能 人 志士 认识 到 字体 排 印 工作 
的 重要 性 并 投身 到 其 中 来 ， 中 文字 体 的 兴盛 相信 也 指日可待 。 


35 CSS 3 Ei 


布局 是 CSS 中 经 久 不 衰 的 话题 ， 从 过 去 的 table 布局 到 浮动 布局 再 到 而 今 的 响应 式 布 
局 ， 这 些 布局 技术 或 者 技巧 的 研究 总 是 能 掀起 网 页 开发 的 一 股 股 潮流 。 随 着 移动 互联 网 的 
发 展 以 及 和 传统 互联 网 的 进一步 融合 ， 掌 握 多 环境 下 的 布局 技术 对 前 端 开 发 人 员 越 来 越 重 
要 。CSS 3 自然 不 会 道 着 历史 洪流 而 行 ，CSS 3 中 提供 了 许多 新 技术 用 于 页 面 (乃至 其 他 
媒体 ) 的 布局 。 


3.5. 炒 冷 饭 一 一 负 边 距 与 浮动 


浮动 布局 大 概 是 Web 世界 最 被 广泛 使 用 的 布局 方式 了 , 配合 负 边 距 的 使 用 ， 能 实现 许 
多 自 适应 强 易 扩 展 的 效果 一 一 著名 的 有 “双飞 翼 布 局 ”( 又 称 “ 圣 杯 布局 ”); 


<div id-"page"» 
«div id-"hd"» 
Xp»Headerc/p» 
«/div» 
«div id-"bd"» 
<div class-"main"» 
<div class-"main-wrap"» 
<p>Main</p> 
</div> 
</div> 
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<div class="sub"> 
<p>Sub</p> 
</div> 
<div class="extra"> 
<p>Extra</p> 
</div> 
</div> 
<div id="ft"> 
<p>Footer</p> 
</div> 
</div> 


对 于 上 面 的 文档 结构 ， 要 实现 的 效果 是 sub 和 extra 区 域 固定 宽度 ，main 区 域 出 现在 
中 间 且 随 窗 口 尺 寸 自动 变化 。 双 飞 翼 布 局 的 基本 思路 是 让 三 个 盒子 都 癌 左 浮动 , 同时 将 sub 
盒 向 左 “移动 ”距离 〈 即 margin-left: -100%)， 这 样 sub KAEA main 盒 上 面 并 紧 贴 父 
元 素 左边 缘 ，extra 盒 也 做 同样 的 处 理 ， 不 过 只 向 左 “ 移 动 ”230px， 这 样 就 让 extra 紧 贴 父 
元 素 的 右边 缘 放 置 ，main-wrap 盒 再 施 以 合适 的 左右 边 距 ， 便 可 以 实现 图 3.56 所 示 的 布局 
效果 。 


Header 


float: left; 
width: 1008; 


.main-wrap ( 
margin: 0 230px 0 190px; 
} 


图 3.56 ”双飞 翼 布 局 


这 种 布局 可 以 保证 主要 内 容 (main). 在 整个 文档 中 靠 前 出 现 ， 这 样 在 网 速 比较 慢 时 重 
要 内 容 也 能 率先 泻 染 出 来 。 此 外 ， 该 布局 能 够 随 屏幕 尺寸 变化 自动 伸缩 主 区 域 ， 而 且 其 布 
局 思想 也 可 以 轻易 扩展 到 左右 两 栏 的 场景 。 


3.5.2 ” 栅 格 系统 与 多 列 布局 


从 上 面 的 例子 可 以 看 出 ， 利 用 浮动 可 以 很 方便 地 实现 栅 格 系统 ， 进 而 实现 多 列 布局 。 
比如 一 个 简单 的 960 像素 宽 的 4 列 栅 格 系统 : 


.row ( 
width: 960px; 
} 
.row:after ( 
clear: left; 
content: ''; 
display: table; /* 清除 行 中 浮动 */ 
} 
[class^-"col"] ( 
float: left; 
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很 简单 对 吧 ? 使 用 它 也 非常 简单 : 


<div class="row"> 
<div class="col1"> .coll </div> 
<div class="col2"> .col2 </div> 
<div class="coll"> .coll </div> 
</div> 


最 终 效果 类 似 于 图 3.57 所 示 。 
cor | coi [ cof 


图 3.57 简单 栅 格 系统 


同样 的 原理 ， 可 以 轻易 扩展 到 8、12 列 甚至 16 列 的 栅 格 系统 。 
栅 格 系统 虽然 可 以 实现 按 列 布局 ， 但 是 却 不 能 实现 分 栏 布局 ， 分 栏 布局 多 见于 纸 质 出 
版 物 。CSS 3 中 提出 了 多 列 布局 模块 (Multi-column Layout Module〉 可 以 满足 这 一 需求 : 
#paragraph { 
/* 列 数 */ 
-webkit-column-count: 2; 
/* 指定 每 列 固定 宽度 ， 但 列 的 实际 宽度 和 容器 宽度 也 有 关系 */ 
-webkit-column-width: 10em; 
/* 列 与 列 中 间 的 空隙 */ 
-webkit-column-gap: 5em; 
/* 列 中 间 的 分 割 线 ， 类 似 border 的 值 */ 
-webkit-column-rule: 6px solid blue; 


) 
放 在 段落 里 的 内 容 最 后 的 布局 如 图 3.58 所 示 。 


我 说 道 : “和 爸爸， 你 走 吧 。” 他 望 车 外 布 小 帽 ， 窍 着 黑 布 大 马 衬 ， 深 青 布 棉 袍 ， 蹦 
看 了 看 说 : “我 买 几 个 构 子 去 。 你 就 在 此 BRENKEN, puza 下 去 ， 尚 不 大 
地 ， 不 要 走动 。 ”我 看 那 边 月 台 的 栅栏 外 有 难 。 可 是 他 穿 过 铁 aa tamine, 就 
中 走 到 那 边 月 合 ， 和 全 bui EE 着 上 而 ， 两 脚 再 向 上 
穿 过 铁道 ， 须 跳 下 去 又 息 上 去 。 父 亲 是 一 ; 他 肥胖 的 身子 向 AR 显 出 努力 的 祥 
胖子 ， E EDITA 我 本 来 要 PH 5: 


的 ， 他 不 衣 ， 只 好 让 他 去 。 我 看 见 他 戴 着 黑 


E358 多 列 布局 


CSS 3 多 列 布局 模块 在 一 定 程度 上 增强 了 HTML 文档 的 表现 力 , 也 使 得 HTML 相关 技 
术 能 应 用 在 更 广 的 场景 ， 如 电子 出 版 领域 。 
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3.5.8 弹性 盒 布 局 (Flexible Box) 


Flexible 在 英文 中 的 本 意 是 “可 弯曲 的 、 和 柔韧 的 ”。 不 得 不 赞叹 的 是 ，CSS 3 中 Flexible 
Box 所 呈现 出 的 特性 无 比 契 合 它 柔 韧 的 本 意 。 

先 试想 这 样 一 种 再 常见 不 过 的 需求 : 在 一 个 页 面 的 header 里 存在 一 些 导航 按钮 ， 页 
面 要 适应 各 种 屏幕 分 辩 率 〈 包 括 手持 设备 )， 要 求 这 些 按钮 能 均匀 排 满 整个 页 面 〈 且 只 
一 行 )。 

<div class="header"> 

<a class-"A" href="/home"> 主 页 </a> 

<a class="B" href="/about"> 关 于 </a> 


<a class="C" href="/archive"> 存 档 </a> 
</div> 


可 能 你 的 脑海 里 会 立马 蹦 出 来 浮动 两 字 儿 。 嗯 ， 没 错 ， 利 用 浮动 加 上 相对 父 元 素 百 分 
比 的 宽度 可 以 实现 这 一 点 : 
.header { 


.clearfix; /* fW, iil header 的 浮动 */ 
j 


aí 

/* 浮动 加 百分比 宽度 */ 
float: left; 

width: 33.33$; 

display: block; 
text-align: center; 
outline: 1px solid gray; 
) 


运行 后 的 效果 如 图 3.59 所 示 。 
主页 I 关于 I 存档 | 


图 3.59 浮动 实现 


这 时 候 棘 手 的 问题 来 了 ， 要 是 这 些 导 航 按钮 的 数目 不 是 固定 的 ， 怎 么 办 ? 仔细 想 想 ， 
似乎 可 以 将 A 标签 display 为 inline-block， 然 后 text-align:justify? 思路 不 错 ， 可 惜 jusify 
本 来 是 用 来 做 文字 排版 ， 对 于 单行 的 情况 ， 将 失去 分 散 对 齐 的 作用 ， 即 便 使 用 伪 元 素 硬 生 
生 在 其 后 插入 一 行 ， 也 不 能 解决 容器 高 度 增长 的 问题 。 纯 CSS CART, ARR féta 
于 JavaScript， 当 导航 栏 里 面 的 按钮 数目 变化 时 ， 动 态 计算 其 width 应 该 是 多 少 。 但 用 
JavaScript 来 做 排版 用 总 归 有 点 麻烦 ， 要 是 这 时 候 再 提出 需要 鼠标 hover 时 自动 按 比例 增长 
相应 条 目 …… 愿 上 天 保佑 你 的 产品 经 理想 象 力 贫乏 不 堪 。 

WIERE, REKT, AAH flexible box 怎么 实现 上 面 这 些 “ 奇 范 ” 需 求 : 

-header ( 

/* 容器 */ 
display: -webkit-flex; 
H 


aí 
text-align: center; 
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-webkit-flex: 1; 

j 

a:hover { 
/* 鼠标 移入 时 变 宽 一 点 点 */ 
width: 160px; 

} 


运行 后 的 效果 如 图 3.60 所 示 。 
主页 [== 有 = 在 档 
图 3.60 ”弹性 盒 实现 


什么 ? 已 经 好 了 ? 没 错 ， 已 经 完美 实现 上 面 的 需求 一 一 弹性 盒 就 是 这 样 神 奇 的 东西 ， 
且 听 我 在 下 文 细 细 道 来 。 

MERR EN t (display:block) 等 一 样 是 一 种 针对 元 素 框 的 布局 模式 (layout 
mode )， 它 专 为 不 同 尺 寸 和 不 同 设备 的 元 素 排 布 而 设计 ， 可 以 说 它 就 是 为 移动 而 生 的 强大 
技术 。 弹 性 盒 利 用 弹性 盒 实现 以 往 需要 多 种 技术 配合 才能 实现 的 常规 布局 将 变 得 异常 容易 ， 
也 无 须 考虑 浮动 塌陷 和 边 距 折 革 等 恼人 的 问题 。 

从 上 例 可 以 看 到 ， 弹 性 盒 非常 易于 使 用 ， 利 用 display:flex 可 以 定义 一 个 弹性 盒 
(flexbox) 容器 ， 在 这 个 容器 内 的 子 元 素 能 够 以 水 平方 向 排列 ， 其 子 元 素 的 flex 属性 设置 
为 1 表示 每 个 子 元 素 都 占据 父 元 素 水 平方 向 的 一 份 空间 ， 这 样 其 尺寸 能 够 自动 填充 适应 其 
可 显示 的 空间 ， 也 可 以 单独 为 每 个 子 元 素 设置 它 所 占 父 元 素 的 比例 : 


M ERU] 
-webkit-flex: 1; 

} 

.Bíf 
-webkit-flex: 2; 


这 种 情况 父 元 素 将 被 分 成 四 等 分 ，B 元 素 占 两 份 ， 如 图 3.61 所 示 。 
C xm TI XI | ££ 
图 3.61 弹性 盒 的 空间 划分 


当然 ， 弹 性 盒 能 做 的 远 不 止 此 ， 容 器 内 的 子 元 素 其 实 可 以 按 任意 方向 (水 平 或 者 垂直 ) 
分 布 ， 宽 高 的 比例 也 可 以 自由 调整 ， 甚 至 元 素 显示 的 顺序 也 可 以 随意 指定 一 一 真正 做 到 最 
终 泻 染 与 源码 无 关 。 可 以 大 言 不 懈 的 说 ， 几 乎 所 有 能 够 用 大 脑 想 到 的 页 面 布局 弹性 盒 都 能 
胜任 ， 而 且 在 代码 层面 可 以 做 到 十 分 优雅。 

要 深刻 理解 弹性 使 ， 必 须 先 将 弹性 盒 与 其 他 盒子 完全 分 开 来 对 待 ， 它 和 inline 和 block 
元 素 都 不 再 是 一 路 人 ， 各 种 文档 流 浮动 定位 规则 也 都 不 再 适用 于 它 ， 如 图 3.62 所 示 。 

对 照 这 幅 图 需要 理解 这 样 几 个 核心 概念 。 


1. 弹性 容器 (flex container) 


display 属性 为 flex 或 者 inline-flex 的 元 素 将 会 变 成 一 个 弹性 容器 。 如 果 是 flex, JA 
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对 于 容器 外 的 元 素 它 将 表现 得 和 block 类 似 ， 占 据 一 整 行 空间 ， 边 距 也 会 与 其 他 元 素 发 生 
Jr, dfi inline-flex 则 表现 得 和 inline-block 类 似 。 


? 4 
: 1 
flex container i P 
cross start cross axis 
i 
7 UTC DC 
i 
i 
p H ' p 
flex item flex item ! flex item 
1 
i 
M --- main size -->§ | cross size 

i i 

i i 

i i 

i ] 

] Y 
i 
i 
i 

~- main start cross end i main end ~~ 

i i 
v 


图 3.62 ”弹性 盒 核心 概念 


2. 弹性 项 (flex item) 

弹性 容器 内 的 子 元 素 将 自动 成 为 可 供 布 局 的 弹性 项 ， 如 果 弹 性 容器 中 包含 子 文 本 节 
点 ， 则 这 些 文本 节点 会 被 包 庄 进 匿 名 弹性 项 中 (和 匿名 行 框 类 似 )。 

3. 轴线 (Axis) 


默认 情况 下 弹性 容器 中 的 子 元 素 将 在 水 平方 向 上 排 布 ， 这 是 因为 弹性 容器 的 主轴 线 
(main axis) 在 未 指定 的 情况 下 是 基于 行 (row) 的 , 与 主轴 线 垂直 相交 的 自然 是 副 轴 线 (cross 
axis)。 主 轴线 可 以 通过 给 弹性 容器 设置 flex-flow 属性 来 改变 : 


<div class-"flex-box"» 
<div class-"A"» A </div> 
<div class-"B"» B </div> 
<div class-"C"» C </div> 
</div> 


虽然 源码 中 是 按 A. B. C 排列 ， 通 过 将 flex-flow 设置 为 column-reverse 实现 按 列 逆 
序 排列 : 


.flex-box { 
display: -webkit-flex; 
/* flex-flow 可 以 被 设 为 row. row-reverse. column 和 column-reverse 四 种 值 */ 
-webkit-flex-flow: column-reverse; 


j 
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运行 后 的 效果 如 图 3.63 所 示 。 

元 素 在 弹性 容器 里 的 排 布 和 轴线 方向 是 一 致 的 ， 对 于 从 左 至 右 的 书写 环境 (wrting 
mode)， 主 轴线 车 被 设置 为 row， 则 其 开始 方向 (main start) 是 容器 的 左边 缘 。 结 束 方向 
(main end) 在 右边 缘 。 如 果 是 column-reverse， 则 开始 方向 将 变 成 容器 下 边缘 。 副 轴线 类 
似 的 也 有 开始 方向 Ceross start) 和 结束 方向 (cross end)。 


[o 


图 3.63 ” 按 列 逆向 排 布 


除了 定义 弹性 项 的 排 布 方向 ， 轴 线 对 弹性 项 在 轴线 方向 上 的 对 齐 〈align) 也 有 很 大 

影响 。 

O flex-direction: 实际 上 flex-flow 属性 是 flex-direction 和 flex-wrap 的 快捷 方式 ， 
flex-direction 定义 了 排 布 是 按 行 还 是 按 列 一 一 也 就 是 说 定义 了 主轴 线 的 方向 。 
flex-wrap 可 以 控制 在 弹性 项 宽度 (或 者 高 度 ) 超过 主轴 线 长 度 时 是 否 折 行 。 

口 justify-content: 对 于 弹性 项 没有 填 满 弹 性 容器 的 情况 ，justify-content 定义 了 弹性 
项 们 在 主轴 线 上 如 何 对 齐 ， 可 以 左右 对 齐 〈flex-start 或 flex-end) ， 也 可 以 居中 
Ccenter) ， 分 散 对 齐 有 两 种 情况 ， 一 种 是 space-around， 元 素 会 均匀 分 布 : 


O 另 一 种 是 space-between， 两 边 的 元 素 会 紧 靠 边缘 : 


口 align-content: justify-content 控制 元 素 在 主轴 线 的 排 布 ，align-content 则 控制 元 素 
副 轴 线 上 排 布 一 一 当然 前 提 是 容器 的 高 度 要 大 于 子 元 素 高 度 才 会 生效 ， 可 取 的 
值 有 flex-start | flex-end | center | space-between | space-around | stretch。 相 比 于 
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justify-content 多 了 一 种 stretch， 此 时 会 将 元 素 拉 伸 成 和 容器 一 样 高 : 


口 align-items: 在 元 素 高 度 不 一 致 时 〈 或 者 说 在 副 轴线 方向 的 尺寸 不 一 致 时 ) 的 对 齐 
方式 。 


4. 方向 (Directions) 


除了 flex-direction 可 以 指定 主轴 线 的 方向 -reverse 反 向 )， 对 每 个 弹性 项 应 用 order 
属性 可 以 指定 一 个 元 素 在 主轴 线 上 出 现 的 顺序 : 
.-A f 
-webkit-order: 2; 
) 
ZEE 
-webkit-order: 3; 
} 
se a 
-webkit-order: 1; 


) 


运行 后 的 效果 如 图 3.64 所 示 。 


图 3.64 指定 顺序 显示 
5. R} (Dimensions) 


弹性 项 的 具体 尺寸 通常 来 讲 是 不 可 知 的 ， 且 不 再 被 成 为 “ 宽 ” 和 “高 ”， 而 是 成 为 主 
尺寸 (main size) 和 副 尺 寸 (cross size)。 对 具体 弹性 项 应 用 flex 属性 可 以 调整 该 项 的 尺寸 。 
flex 属性 实际 是 下 面 三 个 属性 的 简写 。 

口 flex-basis: 指定 弹性 项 的 基准 尺寸 ,可 以 是 任意 长 度 单位 ， 默 认 情况 下 是 auto， 这 

时 弹性 项 的 具体 尺寸 由 flex-grow、flex-shrink 属性 和 容器 的 尺寸 共同 决定 。 
口 flex-grow: 指定 一 个 自然 数 ， 以 容器 主轴 线 的 “ 份 数 ”来 定义 弹性 项 的 主 尺 寸 。 
口 flex-shrink: 同样 是 自然 数 ， 指 定 弹 性 项 的 收缩 因子 (flex shrink factor) ， 这 意味 
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着 ， 当 指定 了 弹性 项 的 基准 尺寸 但 容器 的 尺寸 却 小 于 所 有 弹性 项 基准 尺寸 的 和 时 ， 

就 以 flex-shrink 指定 的 份 数 来 分 配 空间 , 反之 则 使 用 flex-grow 的 值 来 分 配 空间 (如 

果 没 有 指定 flex-basis 的 值 ，flex-shrink 的 值 不 会 起 作用 ) 。 
由 于 弹性 盒 是 一 种 全 新 的 布局 模式 ， 因 此 应 用 了 flex 相关 属性 的 元 素 将 不 再 受 float、 
clear, vertical-align 等 和 定位 相关 属性 的 影响 (也 包括 column-* 相 关 属 性 )， 这 一 点 请 务必 
切记 。 
此 外 ， 截 止 到 撰 稿 时 弹性 盒 被 大 多 数 现代 浏览 器 (不 包括 IE 9) 部 分 支持 ， 如 果 你 想 
要 在 iOS 和 Android 平台 使 用 都 是 没有 问题 的 ， 但 是 记得 加 -webkit 前 缀 ， 对 于 实现 了 老 版 
本 弹性 盒 的 浏览 器 ,CSS 的 写法 可 能 会 有 些许 不 同 (-webkit-flex 属性 可 能 会 写作 -webkit-box 
属性 )。 


36 x 起 来 


jQuery 如 此 广泛 流行 的 一 个 重要 原因 就 是 其 功能 强大 而 使 用 简单 的 动画 方法 ， 然 而 网 
页 设计 对 动画 要 求 越 来 越 高 ， 基 于 JavaScript 的 动画 效果 无 论 从 实现 上 还 是 性 能 上 对 于 开 
发 者 来 讲 都 是 巨大 的 考验 。CSS 3 动画 相关 模块 的 提出 解放 了 JavaScript 程序 员 , 配合 CSS 
3 的 变形 模块 ， 设 计 人 员 可 以 轻易 实现 复杂 绚丽 的 动画 效果 。 本 节 内 容 将 简单 介绍 CSS 变 
形 和 动画 相关 的 内 容 。 


3.6.1 CSS 变形 (CSS transform) 


对 于 最 终 显 示 在 浏览 器 中 的 HTML 元 素 (文字 或 者 图 片 ) 而 言 ， 它 们 本 质 上 都 是 绘制 
到 屏幕 上 的 图 形 ，CSS 3 变形 模块 提供 了 对 页 面 上 文字 和 图 片 进 行 旋转 、 缩 放 、 倾 斜 和 移 
动 的 能 
transform 和 transform-origin 是 CSS 变形 最 主要 的 两 个 属性 ，transform 指定 要 对 元 素 
进行 哪些 变形 ，transform-origin 则 指定 变形 的 起 始 位 置 。 
最 基本 的 变形 是 旋转 (rotate): 
#div1 ( 
background: yellow; 
width :200px; 
-webkit-transform: rotate(20deg); 
} 
运行 后 的 效果 如 图 3.65 所 示 。 
除了 rotate 函数 ， 变 形 函数 还 有 skewx〔 倾 斜 )、 
translate( 位 移 ) 和 scale〈 缩 放 ) 几 种 基本 变形 函数 ， 他 
们 的 效果 如 图 3.66 所 示 。 
通过 设置 transform-origin 可 以 指定 元 素 变 形 基于 
的 原点 ， 比 如 : 图 3.65 ”基本 变换 一 一 旋转 
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transform: skewx(30deg) 


transform: translate(20px, 
10%) transform: scale (0.8) 


图 3.66 常见 变形 函数 


#div1 ( 
-webkit-transform-origin: top left; 
) 
#div2 ( 
-webkit-transform-origin: center 140px; 


i 
运行 后 的 效果 如 图 3.67 所 示 。 


transform-origin: top left transform-origin: top left 


图 3.67 改变 变形 的 默认 原点 


transform-origin 最 多 接受 三 个 值 ， 分 别 是 x、y 和 z 三 个 轴 向 的 偏 移 量 ， 其 语法 是 : 


transform-origin: [ <percentage> | <length> | left | center | right | top 
| bottom] | 
[ [ <percentage> | «length» | left | center | right ] && 
[ «percentage» | «length» | top | center | bottom ] ] «length»? 


既然 transform-origin 都 拥有 z 轴 偏 移 ， 那 transform 自然 没 理由 不 支持 3D 变形 
比 与 前 面 介绍 的 2D 变形 函数 ， 其 实 也 就 多 了 3d 的 后 级 而 已 : 
body ( 
-webkit-perspective: 100px; 


) 
-divl ( 


相 
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/* 参数 前 三 个 值 分 别 表示 旋转 时 基于 的 x、y 和 z 轴 的 坐标 ， 取 值 为 number */ 
-webkit-transform: rotate3d(1, 2.0, 3.0, 10deg); 
) 
-div2 ( 
/* 三 个 参数 表示 元 素 基 于 x. y 和 z 轴 移 动 的 长 度 值 , 其 中 z 轴 上 的 移动 在 视觉 上 依赖 于 页 面 透 
视 空间 的 深度 */ 
-webkit-transform: translate3d(10px, -20px, -10px); 
i 
-div3 ( 
/* 同样 针对 x. y 和 z 轴 进 行 缩放 ， 要 注意 z 轴 的 缩放 和 元 素 在 z 轴 上 的 位 置 相关 */ 
-webkit-transform: scale3d(0.8, 1.2, 2) translateZ(5px); 
i 


运行 后 的 效果 如 图 3.68 所 示 。 


rotate3d translate3d 


scale3d 


图 3.68 3d 变形 


1. 透视 (perspective) 


要 理解 3d 变形 ， 关 键 是 理解 透视 这 个 概念 。 在 上 面 的 例子 中 ， 我 们 给 body 设置 了 
perspective 属性 ， 它 表示 了 某 元 素 的 深度 ， 比 如 现在 要 实现 一 个 六 面体 : 


<div class="cube"> 
<div class-"middle"»«/div» 
<div front">1</div> 
<div back">2</div> 
<div right">3</div> 
<div left">4</div> 
<div class="top">5</div> 
<div class="bottom">6</div> 

</div> 


然后 对 六 个 面 进行 变形 : 


-Cube > div { 
display: block; 
position: absolute; 
width: 100px; 
height: 100px; 
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line-height: 100px; 
font-size: 60px; 
color: white; 
text-align: center; 
} 
.middle ( 
/* middle 用 来 展示 基准 面 */ 
border: 1px dashed black; 
background: transparent; 
) 
-Eront Y 
border: none; 
background: rgba( 075.070, 70:3 Ne 
-webkit-transform: translateZ( 50px ); 
) 
-back ( 
background: rgba( (00, 255, 0, 1); 
-webkit-transform: translateZ( -50px ); 
} 
-right { 
background: rgba( 196, 0, uc fu WE 
-webkit-transform: rotateY( 90deg) translateZ( 50px ); 
i 
.left ( 
background: rgba( 07 078106 0:7 PF 
-webkit-transform: rotateY(-90deg) translateZ( 50px ); 
) 
.top ( 
background: rgba( 196, 196, D Orge 
-webkit-transform: rotateX( 90deg) translateZ( 50px ); 
j 
-bottom ( 
background: rgba( 196, 0- 196: Oe y 
-webkit-transform: rotateX( -90deg) translateZ( 50px ); 
j 


如 果 我 们 没有 设置 任何 透视 属性 ， 那 么 最 终 的 结果 是 没有 结果 ， 如 图 3.69 所 示 。 


图 3.69 ”失败 的 六 面体 


2. 为 cube 元 素 加 上 透视 


现在 


-Cube ( 
width: 200px; 
height: 200px; 
/* 透视 深度 */ 


们 为 cube 元 素 加 上 透视 : 
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-webkit-perspective: 250px; 

/* preseve-3d 指定 元 素 的 子 元 素 在 3d 空间 内 定位 */ 
-webkit-transform-style: preserve-3d; 

/* 指定 用 户 从 哪个 方向 看 过 来 的 */ 
-webkit-perspective-origin: -100% -50$; 


) 
运行 后 的 效果 如 图 3.70 所 示 。 


4 & 


图 3.70 成 功 的 六 面体 


AFE: 无 论 是 3D 还 是 2D 变形 ， 其 实 从 本 质 上 而 言 都 是 矩阵 变换 (matrix transform) 的 
结果 。CSS 中 也 提供 了 更 加 底层 的 matrix 和 matrix3d 函数 ，skew、translateh 和 
translate3d 等 函数 其 实 都 是 matrix 和 matrix3d 函数 的 特例 ， 理 解 矩 阵 变换 如 何 作 
用 于 元 素 需 要 一 定 的 线性 代数 和 三 角 函 数 相 关 知 识 ， 轿 于 篇 幅 和 主题 原因 本 书 也 
不 再 展开 讲解 ， 有 兴趣 的 读者 可 以 自行 研究 。 


3.6.2 CSS 过渡 (CSS Transitions) 


页 面 动画 在 很 长 一 段 时 间 里 都 是 JavaScript 的 专利 ， 写 一 个 div 在 hover 时 向 右 移动 
100px 的 动画 效果 可 能 得 这 样 : 


<html> 
<head> 
<title></title> 
<style> 
#div1 { 
width: 40px; 
height: 40px; 
position: relative; 
background: #ccc; 
padding: 5px; 
li 
</style> 
</head> 
<body> 
<div id="div1"> 
hover 
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t 
</div> 
<script> 
var div = document .getElementById('div1'), timerl, timer2 
div.onmouseover = function (e) { 
clearInterval (timer2) 
timerl = setInterval(function () { 
var curLeft = parseInt(div.style.left) || 0 
if (curLeft » 100) ( 
clearInterval (timer1) 
) else { 
div.style.left = curLeft + 1 
) 
1722) 
] 
div.onmouseout - function (e) ( 
clearInterval (timerl) 
var timer2 - setInterval(function () ( 
var curLeft = parseInt(div.style.left) || 0 
if (curLeft <= 0) { 
clearInterval (timer2) 
) else ( 
div.style.left - curLeft - 1 
) 
), 2) 
)«/script» 
</body> 
</html> 


代码 宛 长 不 堪 , 不 支持 动画 时 长 和 缓 动 等 效果 , 而 且 还 有 潜在 的 性 能 问题 .利用 jQuery， 
代码 可 以 简化 许多 ， 最 终 可 能 是 这 样 : 
$('£divl').mouseenter(function (e) { 
$(this).stop().animate(('left': 100]) 
}) .mouseleave (function (e) { 


$(this) .stop().animate({'left': 0}) 
) 


而 利用 CSS 3 transition, 可 以 不 写 一行 JavaScript 代码 实现 上 面 的 动画 , 而且 效 果 完 美 ; 


#div1 ( 
transition: all 0.8s; 
) 
#divl:hover ( 
left: 100px; 
} 


transition 动画 的 关键 在 于 元 素 状态 的 变迁 ， 如果 没 有 设置 transition 动画 ， 则 两 个 状态 
的 变迁 是 瞬时 的 , 如 果 设 置 了 transition 动画 , 则 两 个 状态 之 间 的 中 间 状 态 将 会 被 自动 计算 ， 
并 以 动画 形式 进行 状态 变迁 。 举 例 来 说 ， 我 们 给 一 张 图 片 设置 如 下 CSS: 
img { 
/* 匹配 的 img 元 素 在 width 或 height 发 生 改变 时 会 以 动画 形式 变化 ， 且 动画 时 长 为 一 秒 */ 


transition: width 1s, height 1s; 
} 


如 果 它 在 起 始 状 态 下 的 尺寸 是 200X 100， 我 们 通过 JavaScript 将 其 尺寸 的 结束 状态 设 
置 为 180X90: 
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var img = document.getElementById('imgl') 
img.style.width = 180 
img.style.height- 90 


这 时 候 图 片 会 动态 改变 其 尺寸 大 小 ， 如 图 3.71 所 示 。 


中 间 状 态 会 自动 计算 


起 始 状态 结束 状态 
图 3.71 CSS transition 原理 示意 


可 以 应 用 transition 的 属性 非常 多 ，width、 margin. color, background-color, opacity:***** 


甚至 transform 属性 也 可 以 被 动画 化 : 


现 。 


.box { 

width: 100px; 

height: 100px; 

background-color: #0000FF; 

-webkit-transition:width 2s, height 2s, background-color 23" 
-webkit-transform 25; 


-box:hover ( 

/* 鼠标 hover 时 放大 并 变色 ， 同 时 旋转 180 度 */ 
width:200px; 

height:200px; 

background-color: #FFCCCC; 
-webkit-transform:rotate (180deg); 

) 

如 果 配 合 3D transform, H CSS 就 可 以 实现 3D 动画 了 。 

transition 是 一 个 复合 属性 ， 由 以 下 属性 构成 。 

O transition-property: 应 用 动画 的 属性 ， 如 果 使 用 关键 字 all， 那 么 只 要 支持 动画 的 属 
性 在 状态 变迁 时 都 会 以 动画 过 渡 。 

O transition-duration: 动画 过 渡 的 时 长 ， 使 用 秒 (s) 或 者 毫秒 (ms) 作 单 位 。 

O transition-timing-function: EZIK% SRU Æ ease〈 先 慢 后 快 然后 再 慢 ) ， 你 也 可 
以 设置 ease-in EISSIR) ~ ease-out Etk Jatt) 和 linear 线性) 等 等 预 设 函 
数 ， 甚 至 还 有 steps 函数 可 以 对 动画 设置 固定 数量 的 关键 帧 。 如 果 你 熟悉 三 次 贝 塞 
尔 曲线 (cubic Bezier curve) 的 基本 原理 ， 还 可 以 使 用 强大 的 cubic-bezier 函数 创 
作出 更 复杂 缓 动 效果 。 

口 transition-delay: 动画 开始 前 的 延迟 时 间 。 

如 果 你 想 对 应 用 了 动画 的 元 素 进行 更 多 的 控制 ， 可 以 在 JavaScript 侦 听 元 素 事 件 来 实 

目前 只 有 一 个 transitionend 事件 在 动画 结束 后 触发 ， 且 需要 加 上 webkit 前 绥 : 


el.addEventListener("webkitTransitionEnd", updateTransition, true); 


配合 JavaScript, 实现 一 些 有 趣 的 效果 也 变 得 非常 容易 ， 下 面 给 出 一 个 小 球 跟随 鼠标 单 


击 的 示例 : 


«7. 
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<html> 
<head> 
<style> 
#foo { 
border-radius: 50px; 
width:50px; 


height :50px; 
background: #c44; 
position:absolute; 
top:0; 
left:0; 
-webkit-transition: all 1s; 
} 
</style> 
</head> 
<body> 
<div id-"foo"»«/div» 
<script> 


var f = document.getElementById('foo'); 

document.addEventListener('click', function (ev) { 
f.style.left = (ev.clientX-25)+'px'; 
f.style.top = (ev.clientY-25)+'px'; 

}, false); 

</script> 

</body> 

</html> 


3.6.3 CSS 动画 (CSS Animations) 


transition 动画 固然 方便 , 但 它 也 有 一 些 难以 克服 的 缺点 。 由 于 transition 只 针对 两 个 状 
态 之 间 的 变化 进行 动画 ， 超 过 两 个 状态 就 无 力 再 续 。 如 果 你 想 要 实现 一 个 元 素 按 某 个 路 径 
或 者 序列 进行 变化 , transition 就 无 法 实现 你 的 需求 .还 好 CSS 3 中 提供 了 Animations 模块 ， 
同样 用 于 实现 动画 效果 ， 但 提供 了 相 比 transition 更 加 强大 的 功能 。 
一 个 完整 CSS Animations 由 两 部 分 组 成 ， 一 部 分 是 一 组 定义 的 动画 关键 帧 ， 另 一 部 分 
是 描述 该 动画 的 CSS 声明 。 来 看 一 个 元 素 滑动 入 场 的 动画 : 
G-webkit-keyframes slidein { 
from ( 
margin-left: 100$; 
us ft 


margin-left: 0%; 
} 


} 

/* divi 会 在 页 面 加 载 好 后 自动 从 屏幕 右 侧 滑 入 */ 

ddiv1l ( 

-webkit-animation: slidein 3s; 

) 

可 以 看 到 我 们 使 用 @keyframes 规则 Cat-rule) 定义 了 一 个 名 为 slidein 的 动画 ,使 用 了 
它 的 元 素 的 状态 会 从 左边 距 100% 变 迁 到 0%. @keyframes 也 可 以 使 用 百分比 来 控制 动画 的 
时 间 轴 状态 : 


@-webkit-keyframes slidein { 


/* from 和 to 关键 字 其 实 就 是 0$ 和 100% 的 "字母 版 ”*/ 
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from ( 
margin-left: 100$; 
} 
70% { 
width: 60px; 
height: 60px; 
font-size: 150%; 
} 
taf 
margin-left: 0%; 
} 
} 


@keyframes 可 以 设置 多 个 关键 帧 , 这 样 动画 的 绚丽 程度 只 受制 于 想象 力 而 不 受制 于 技 
术 了 。animation 属性 用 于 指定 具体 的 动画 以 及 动画 的 时 长 等 行为 。 和 transition 属性 类 似 ， 
animation 也 是 N 多 子 属性 的 简写 版 ， 这 些 子 属 性 大 部 分 和 transition 也 类 似 。 
animation-delay: 动画 开始 前 的 延迟 。 
animation-direction: 动画 方向 ， 设 置 为 reverse 的 话 就 会 从 to 移动 到 fom， 如 果 设 
HA alternate 则 会 往复 运动 ， 类 似 还 有 alternate-reverse。 
animation-duration: 动画 时 长 。 
animation-iteration-count: 动画 重复 的 次 数 ， 设 置 为 infinite 可 以 无 限 地 动 下 去 。 
animation-name: 要 使 用 的 动画 名 。 
animation-play-state: 通常 这 个 属性 用 于 查询 元 素 的 动画 状态 是 paused 还 是 running 
的 ， 当 然 也 可 以 用 JavaScript 直接 设置 这 个 属性 以 暂停 或 恢复 动画 。 
O animation-timing-function: 缓 动 函数 ， 和 transition 一 样 ， 可 以 设置 任意 合法 的 
timing-function 类 型 。 
口 animation-fill-mode: 正常 情况 下 动画 结束 后 元 素 会 恢复 至 动画 开始 前 的 初始 状态 ， 
通过 将 animation-fill-mode 设置 为 forwards, backwards 和 both 可 以 将 元 素 最 终 状 
态 设置 为 动画 的 起 始 或 结束 状态 〈forwards 等 属性 的 具体 效果 还 要 依赖 于 
animation-direction 和 animation-iteration-count 的 值 ) 。 
比如 上 面 的 例子 如 果 这 样 写 ， 那 么 会 使 元 素 滑 入 后 又 滑 出 : 
#div1 ( 
-webkit-animation-name: slidein; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 2; 
-webkit-animation-direction: alternate; 


-webkit-animation-fill-mode: forwards; 


) 


Do 


AE: CSS transition, CSS Animations 和 其 他 CSS 技术 一 样 ， 仅 仅 用 文字 和 图 片 来 描述 
是 难以 让 读者 领会 其 精 获 的， 古人 有 云 : 实践 出 真知 ， 这 话 在 计算 机 技术 相关 领 
域 尤 其 不 假 , 建议 读者 多 多 在 真实 的 浏览 器 环境 里 实验 这 些 技术 , 体会 各 种 差异 。 


和 transition 类 似 , animation 也 提供 了 一 些 事 件 用 以 控制 动画 , 不 过 相对 而 言 animation 
的 事件 种 类 更 加 丰富 。 

口 animationstart: 动画 开始 时 触发 。 
口 animationend: 动画 结束 时 触发 。 
O animationiteration: 动画 每 迭代 一 次 触发 一 次 该 事件 。 
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这 三 种 类 型 的 事件 对 象 中 都 有 一 个 elapsedTime 属性 ， 它 表示 距离 动画 开始 已 经 过 去 
了 多 少时 间 。 


<html> 
<head> 
<style type="text/css"> 
.slidein { 
-webkit-animation-duration: 3s; 
-webkit-animation-name: slidein; 
-webkit-animation-iteration-count: 3; 
-webkit-animation-direction: alternate; 
i 
@-webkit-keyframes slidein { 
from { 
margin-left:100%; 
} 
ES tl 
margin-left:0%; 
} 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
IW) 
</div> 
«ul id="output"> 
</ul> 
<script> 
function listener (e) { 
var 1 = document.createElement ("li"); 
switch (e.type) { 
case "webkitAnimationStart": 
l.innerHTML = "Started: elapsed time is " + e.elapsedTime; 
break; 
case "webkitAnimationEnd": 
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; 
break; 
case "webkitAnimationIteration": 
l.innerHTML = "New loop started at time " + e.elapsedTime; 
break; 
) 
document.getElementById ("output") .appendChild(1); 
} 


function setup() { 
var e = document .getElementById ("div1"); 
e.addEventListener ("webkitAnimationStart", listener, false); 
e.addEventListener ("webkitAnimationEnd", listener, false); 
e.addEventListener ("webkitAnimationIteration", listener, false); 
e.className = "slidein"; 
5 
setup() 
</script> 
</body> 
</html> 


这 个 页 面 最 终 输出 结果 如 图 3.72 所 示 。 


。140 。 


第 3 章 初探 CSS3 


飘动 


Started: elapsed time is 0 
New loop started at time 3 
New loop started at time 6 
Ended: elapsed time is 9 


LL T 


图 3.72 Animation Events 


何 时 使 用 何 时 不 用 ? 相 比 于 传统 的 JavaScript 动画 , 基于 CSS 的 动画 有 这 样 一 些 优点 。 

COD 易于 使 用 : transition 和 animation 的 用 法 都 非常 简单 ， 创 建 动画 甚至 都 不 需要 学 
习 JavaScript。 

(2) 效果 平滑 : 使 用 JavaScript 产生 的 动画 通常 都 表现 不 佳 ， 容 易 产生 掉 帧 卡 顿 等 现 
象 , 而 CSS 动画 即便 在 较 低 的 系统 负载 下 也 可 以 运行 的 平滑 ， 而 且 泻 染 引 擎 还 可 以 使 用 跳 
帧 〈frame-skipping) 等 技术 来 进一步 优化 动画 效果 。 

G) 性 能 优异 : 交 由 浏览 器 控制 的 动画 序列 意味 着 浏览 器 本 身 可 以 针对 动画 做 更 多 的 
优化 一 一 比如 在 标签 页 没有 被 显示 的 情况 下 ,浏览 器 可 以 降低 动画 的 fps 甚至 暂停 DOM E 
绘 来 节省 系统 开销 。 
虽然 CSS 动画 优点 多 多 ， 但 在 使 用 CSS 一 定 要 谨慎 : 

(1) 即便 性 能 优异 ， 但 在 计算 资源 捉襟见肘 的 移动 设备 上 ， 能 不 用 动画 就 尽量 不 用 。 

(2) Android 设备 尤其 要 注意 ， 浏 览 器 整体 的 泻 染 性 能 都 远 差 过 iOS 设备 。 

G) 即使 在 桌面 上 ， 动 画 也 不 能 滥用 ， 诸 如 背景 整体 移动 这 样 的 动画 效果 很 可 能 会 导 
致 页 面 的 滚动 和 鼠标 的 移动 有 延迟 现象 。 

(4) CSS 动画 适宜 用 在 一 些 页 面 细节 设计 或 者 转 场 设 计 上 面 ， 比 如 高 亮 链接 、LOGO 
特效 和 翻 页 转 场 等 等 , 如 果 有 复杂 的 长 时 间 的 动画 的 需求 , 应 该 采用 绘图 效率 更 优 的 canvas 
技术 。 


AEE: 3.6 节 介绍 的 所 有 技术 截止 到 撰 稿 时 都 还 在 实验 阶段 ， 相 关 标 准 还 处 于 比较 早期 
的 阶段 ， 但 是 浏览 器 厂商 们 的 跟 进 速度 非常 快 ， 因 此 不 用 担心 支持 问题 ， 唯 一 要 
担心 的 是 恼人 的 前 级 (-o-. -webkit-fe-moz-) ， 无 论 是 属性 还 是 事件 在 使 用 时 都 
不 要 忘 了 加 上 它们 。 


3.7 响应 式 设 计 基 础 


过 去 有 人 说 ， 一 个 人 如 果 连 IE 6 都 能 兼容 ， 那 么 世界 已 经 阻止 不 了 他 了 。 而 今 ， 面 对 
下 面 一 大 桌 设 备 的 时 候 ， 兼 容 正 6 恐怕 已 经 算 不 得 什么 了 ， 如 图 3.73 所 示 。 

响应 式 Web 设计 (Responsive Web Design) 是 ethan marcotte 在 2010 年 五 月 提出 的 一 
个 概念 ,他 在 Responsive Web Design 一 文中 图 述 了 在 不 同 尺寸 的 屏幕 下 如 何 做 不 同 的 布局 ， 
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从 此 以 后 响应 式 设 计 一 发 不 可 收拾 。 近 几 年 整个 前 端 开发 领域 这 个 概念 被 炒 了 又 炒 ， 持 续 
不 断 的 成 为 前 端 开发 与 网 页 设计 上 的 热点 。 


图 3.73 纷繁 的 移动 设备 


对 于 大 部 分 开发 者 来 讲 ， 响 应 式 设计 可 能 只 停留 在 “桌面 版 和 移动 版 共享 一 套 代码 ” 


这 个 层面 ,但 这 几 年 移动 Web 的 飞速 发 展 产 生 了 非常 多 的 最 佳 实践 ,我 认为 广义 上 的 响应 
式 设计 其 实 包含 非常 多 的 内 容 ， 从 前 端 技术 角度 而 言 ， 通 常 包含 这 样 一 些 内 容 : 


O 使 用 流 式 布局 (fluid layout) 或 响应 式 栅 格 CResponsive fluid grid) 以 适应 不 同 屏 
幕 宽度 。 

O 使 用 CSS 3 media queries 技术 针对 不 同 尺寸 甚 至 不 同类 型 屏幕 实现 一 套 代 码 多 套 
布局 或 者 进行 样式 微调 。 

O 使 用 流 式 图 片 〈fluid images) 以 充分 利用 屏幕 空间 。 

O 配合 后 端 抽象 出 HTML 模块 ， 输 出 针对 不 同类 型 设备 适 配 后 的 模板 、CSS、 
JavaScript 或 者 其 他 资源 。 

接 下 来 让 我 们 来 详细 看 看 这 些 技术 分 别 都 是 些 什 么 ， 能 做 什么 。 


3.7.1 从 两 栏 布局 开始 说 起 


六 年 前 ， 两 栏 或 三 栏 布局 可 能 是 这 个 星球 上 使 用 最 广泛 的 页 面 布局 方式 了 。 当 iPhone 


席卷 地 球 六 年 后 的 今天 ， 网 页 的 布局 方式 已 经 是 一 栏 和 多 栏 布局 平分 天 下 了 ， 那 么 依然 纠 


缠 于 两 栏 布局 的 你 ， 应 该 思考 下 怎么 向 一 栏 布局 转化 了 。 


中 


E 


对 同一 套 HTML 代码 在 不 同 宽度 的 屏幕 上 实现 图 3.74 中 两 套 布局 可 能 是 响应 式 布局 


最 最 基础 的 示例 了 ， 要 做 到 这 一 点 关键 在 于 媒体 查询 (media queries) 的 使 用 一 一 针对 
不 同 设备 应 用 不 同 的 CSS。 


不 过 ， 在 讲 media queries 之 前 ， 有 些 可 能 你 并 不 陌生 但 却 有 不 甚 清楚 的 概念 我 们 需要 


新 审视 ， 这 样 对 深刻 理解 媒体 查询 大 有 益处 。 
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图 3.74 布局 的 变换 


1. CSS 像素 (CSS pixel) 与 设备 像素 (device pixel) 


像素 就 是 我 们 在 写 CSS 时 经 常见 到 的 px， 随 着 retina 屏幕 的 兴起 ， 设 备 像素 和 CSS 
像素 已 经 不 像 过 去 那样 即便 混为一谈 也 不 会 导致 任何 问题 。 设 备 像素 通常 指 的 是 屏幕 上 最 
小 的 发 色 单 元 , 比如 在 普通 的 LCD 屏幕 上 , 任意 一 个 发 色 单元 都 由 红 绿 蓝 三 个 发 光 液晶 单 
元 构成 。 而 CSS 像素 通常 与 屏幕 分 辨 率 有 关 ， 比 如 在 一 块 1920X1080〔 设 备 像素 点 数 ) 
的 24 英寸 屏幕 上 , 我 们 假设 屏幕 的 设备 像素 点 是 正方 形 的 , 那么 一 个 像素 点 的 边 长 x 与 屏 
幕 尺 寸 有 这 样 的 关系 ， 如 图 3.75 所 示 。 


(1920x)? + (1080)? = 24? 
E375 计算 设备 像素 点 大 小 


计算 得 出 一 个 像素 点 x 的 边 长 大 约 为 0.011 英寸 (换算 成 mm 大 概 是 0.28mm)， 如 果 
在 这 块 屏幕 上 运行 的 操作 系统 的 分 辨 率 设置 为 1280X720( 即 1920 二 1.5X1080 二 1.5)， 那 
么 此 时 一 个 CSS 像素 的 尺寸 应 该 是 : 0.011*1.5=0.0165 英寸 。 


2. PPI 和 设备 像素 比 (Device Pixel Ratio) 


PPI 通常 被 翻译 成 像素 密度 ， 其 原意 是 Pixels per inch， 即 每 英寸 像素 数 ， 这 里 的 像素 
指 的 是 设备 像素 ， 对 于 前 文 提 到 的 例子 ， 每 一 个 像素 的 大 小 是 0.011 英寸 ， 那 么 每 英寸 的 
像素 数 大 概 就 是 90 个 ， 即 其 PPI 为 90。 对 于 iPhone 4 以 及 后 续 产 品 ， 其 PPI 达到 了 326, 
此 时 如 果 CSS 像素 再 和 设备 像素 保持 一 一 对 应 ， 人 眼 将 很 难看 清 较 小 的 字体 或 者 图 案 ， 因 
此 类 似 iPhone 4 这 样 的 retina 设备 ， 在 系统 上 采取 了 折 中 的 办 法 ， 将 系统 逻辑 分 辨 率 调整 
为 物理 分 辩 率 的 1/2 或 者 03， 或 者 说 使 物理 分 辩 率 是 逻辑 分 辩 率 的 2 倍 或 1.5 倍 ， 这 样 就 
能 使 肉眼 既 能 得 到 很 好 的 视觉 体验 ， 也 不 会 因为 视觉 单元 太 小 而 疲劳 。 此 时 的 2 或 者 1.5 
被 称 为 设备 像素 比 。 通 过 设备 像素 比 可 以 简单 地 判断 设备 是 否 是 retina 设备 ， 在 JavaScript 
里 面 可 以 通过 访问 window.devicePixelRatio 的 值 来 确定 。 
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3. 视 口 (viewport) 


视 口 在 桌面 浏览 器 时 代 就 有 ， 它 表示 的 含义 是 浏览 器 窗口 的 可 视 区 域 。 视 口中 的 像素 
指 的 是 CSS 像素 , 视 口 大 小 决定 了 页 面 布局 的 可 用 宽度 (为 什么 在 过 去 960px 是 一 个 比较 
安全 的 布局 ? 因为 通常 桌面 浏览 器 的 视 口 在 960px 以 上 。)。 

在 屏幕 不 那么 宽 的 移动 设备 大 量 出 现 后 ， 如 果 依 然 以 浏览 器 的 窗口 作为 视 口 ， 那 么 
布局 的 可 用 宽度 就 会 变 少 很 多 (比如 320px)， 如 果 以 前 在 桌面 上 以 较 宽 的 宽度 为 基准 布局 
的 页 面 在 手机 上 就 会 显示 不 完整 ， 如 图 3.76 所 示 。 

为 解决 适 配 桌面 版 网 站 的 问题 ， 移 动 设 备 浏览 器 定义 了 两 种 视 口 : 可见 视 口 (visual 
viewport) 和 布局 视 口 (layout viewport)。 布 局 视 口 决定 了 桌面 版 网 站 的 CSS 在 应 用 时 所 
设置 的 布局 最 大 宽度 ， 可 见 视 口 和 之 前 的 视 口 含 义 一 致 。 大 多 数 移动 浏览 器 将 布局 视 口 的 
宽度 设置 为 980px， 这 样 在 可 见 视 口 中 就 能 容纳 更 多 的 内 容 ， 桌 面 网 站 的 布局 也 不 会 乱 掉 ， 
用 户 可 通过 放大 的 方式 来 浏览 其 中 的 文字 ， 如 图 3.77 所 示 。 


A 


Carrier — 12:45 PM Carrier — 12:43 PM 


Google.com.hk 使 用 下 列 语 


图 3.76 手机 访问 桌面 网 站 示意 图 3.77 布局 视 口 和 可 见 视 口 
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浏览 器 布局 视 口 宽度 可 以 通过 设置 meta 标签 来 覆盖 : 


<meta name-"viewport" content-"width-320px" /> 


此 时 整个 页 面 的 最 大 CSS 宽度 将 是 320px, 你 的 CSS 布局 代码 将 都 会 基于 这 个 基础 值 
来 进行 计算 。 

viewport 元 标签 可 以 设 定 多 项 用 于 配置 视 口 的 可 选 属性 。 

口 width: 布局 视 口 宽度 ， 可 以 设置 为 一 个 具体 的 长 度 ， 也 可 以 设置 为 device-width 
这 样 的 关键 字 ， 此 时 布局 视 口 和 可 见 视 口 的 宽度 相同 (注意 ， 这 里 的 device-width 
并 不 是 屏幕 实际 物理 像素 的 宽度 ， 而 是 指 CSS 像素 宽度 ) 。 
height: 布局 视 口 高 度 。 
initial-scale: 初始 缩放 比例 ， 取 值 范 围 是 (0~10.0) 。 
minimum-scale: 最 小 缩放 比 ， 取 值 同 样 是 (0~10.0) 。 
maximum-scale: 最 大 缩放 比 ， 取 值 同上 。 
user-scalable: 设 定 用 户 是 否 可 以 缩放 ， 取 值 为 yesmno， 默 认为 yes。 


A E: 在 CSS 里 通过 @viewport 规则 同样 可 以 设置 视 口 相关 属性 ， 只 不 过 关键 字 稍 有 
变化 。 
来 看 一 个 应 用 viewport 元 标签 的 例子 : 
<meta name-"viewport" content-"width-320"» 
此 时 页 面 将 假设 屏幕 的 宽度 就 是 320px， 无 论 是 大 屏 、 小 屏 、 横 屏 和 竖 屏 都 会 这 样 泻 
染 ， 因 此 最 终 的 效果 可 能 是 这 样 ， 如 图 3.78 所 示 。 


OOOODD 


peopie.opera.comandreasba [i Goose — | 


«meta Iinames"viewport" 
content-'"width-320"» 


Lorem ipsum dolor sit amet, consectetur people.opera.com/andreasb/viewport'ex01.html CINE 
adipiscing elit. Nunc ac quam sapien, ut 
fringilla diam. Donec sollicitudin vehicula 


tempor. Vivamus tempor lacinia Justo, nec «meta names" V ieWport " 


laoreet massa dictum eu. Fusce porta lacus ac 


ligula imperdiet isculis. Proin egestas gravida content-"width-z320"; 


nibh a faucibus. Pellentesque mi dolor, 
adipiscing non euismod vitae, posuere ut 

nibh. Integer libero nulla, lacinia vitae ultrices 
MA canda non eo Lorem ipsum dolor sit amet, consectetur 
Vestibulum elit diam, faucibus ut tempor sed, 
tempor ultrices felis. Nulla facilisi. Morbi 

lacinia risus quis sapien fermentum lacinia. 

Sed condimentum nulla lacus, eget tincidunt [S 
elit. Morbi ac erat nunc. Integer molestie 
congue rutrum. Suspendisse sit amet lorem. 

nec est semper ullamcorper. Maecenas 


图 3.78 固定 的 布局 视 口 宽度 值 
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可 以 看 到 , 页 面 的 文字 随 着 屏幕 的 宽度 变化 也 变 大 了 , 如 果 希 望 文字 大 小 不 受 viewport 
影响 ， 那 么 可 以 将 width 设置 为 device-width， 运 行 后 的 效果 如 图 3.79 所 示 。 


«meta name-"viewport" content-"width-device-width" /> 


peopleopera.comandreas ME coore ]】 


meta Inamez" viewport 
content-'width-device 
width 1» 


Lorem iptum dolor st amet, consectetur adipising 
elr. Nunc ac quam sapien, ut fringila diam. Donec 
soliiotudin vehicula tempor. Vivamus tempor aaria 
Justo, nec laoreet massa dictum eu. Fusce porta 
lacus ac ligua Imperdiet lacus. Proin egestas. 
gravida ribh a faucibus. Pellentesque mi dolor, 
adipisang non eusmod vtae, posuere ut ribh. 
Integer libero nulla, wania vitae ultries non, 
condimentum non dolor. 


Vestibulum elit dm, faucibus ut tempor sed, 
tempor ultrices felis. Nulla facii. Morbi aorta risus 
quis sapien fermentum aaria. Sed condimentum 
illa lacus, eget tincidunt elit. Morbi ac erat nunc. 


people.opera.com/andreasb/viewport/ex02. html. (Googe — à 1] 


meta inam 
content-'"wid 


Lorem ipsum dolor st amet, consectetur adipiscing eit. Nunc ac quam sapien, ut fringila 
dam. Donec miliatan vehicula tempor. Vivamus tempor ladnia justo, nec laoreet masa 
dictum eu. Fusce porta lacus ac Nga imperdiet acus. Proin egestas gravida nibh a 
aucbus. Pellentesque mi dolor, ad pisang non eusmod vtae, posuere ut nibh. Integer 
bero nulla, sonia viae unas non, condimentum non dolor. 


Vestibulum eit dam, faucibus ut tempor sed, tempor ultrices felis. Nulla factsi, Morbi 9 


Integer molestie congue rutrum. Suspendisse qt ^ F9] ga 
amet krem rec est semper ulamccrper. Maecenas 

molesta tero eget sapien emper utres 

asop pm vitate. 


图 3.79 布局 视 口 与 可 见 视 口 相同 


通过 设置 initial-scale 的 值 可 以 使 页 面 在 刚 泻 染 时 就 放大 ,运行 后 的 效果 如 图 3.80 所 示 。 


<meta name="viewport" content="width=device-width, initial-scale=2"> 


people.operacomvandreasb^ lE coore ]】 


«meta 

name-z 'iviewpor 
contentz'widt 
width; 
initial- 


scale: 21> 


Lorem ipsum dolor sit ame 
consectetur adipiscing eli 
sapien, ut 


图 3.80 initial-scale 7j 2 时 
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不 过 一 个 优化 良好 的 网 站 ， 是 不 应 该 让 用 户 需 要 缩放 才能 正常 阅读 的 ， 因 此 推荐 的 元 
标签 是 类 似 这 样 的 ; 


<meta  name-"viewport"  content-"user-scalable-no,  width-device-width, 
initial-scale-1.0, maximum-scale-1.0" /» 


上 面 这 个 meta 标签 如 果 应 用 到 iPhone 这 样 的 移动 设备 中 ， 用 户 将 无 法 用 双 指 来 缩放 
页 面 ， 且 布局 视 口 的 宽度 将 和 可 见 视 口 〈 即 屏幕 宽度 ) 相等 ， 这 时 候 很 适合 使 用 非 固定 宽 
度 的 布局 。 这 个 模式 对 于 较 小 的 屏幕 非常 有 优势 。 

了 解 了 设备 视 口 等 的 基本 知识 ， 我 们 来 看 看 media queries. 如 何 帮 助 我 们 实现 响应 式 
设计 。 


3.7.2 从 media 到 media queries 


从 原理 上 来 说 , media queries 并 不 是 什么 新 东西 , 早 在 CSS 2.1 时 代 , 就 已 经 有 @media 
规则 了 ， 不 过 那 时 候 @media 属性 只 是 用 来 区 分 媒体 的 类 型 ， 它 支持 下 面 这 些 类 型 的 媒体 。 
braille: Fi XC. 
embossed: 浮雕 排 印 。 
handheld: 手持 设备 。 
print: 普通 打印 机 。 
projection: 投影 仪 。 
screen: 屏幕 。 
speech: 语音 合成 器 〈 非 视觉 ) 。 
tty: 电话 。 
tv: 电视 机 。 
all: 适用 于 所 有 情况 。 

可 以 看 到 CSS 2.1 支持 非常 多 的 媒体 类 型 ， 比 如 针对 打印 机 我 们 可 能 需要 在 footer 加 
上 一 行 版 权 信息 : 

@media print ( 


.footer:after ( 


content: "版 权 所 有 ， 翻 版 不 一 定 究 " 
) 


这 样 只 有 在 打印 的 时 候 会 出 现 这 行 字 。 

可 以 看 到 媒体 类 型 里 面 其 实 是 有 一 个 handheld 来 识别 移动 设备 的 ,但 是 早期 手持 设备 
多 数 都 没有 支持 这 个 属性 , 直接 使 用 了 screen 类 型 ,后 来 虽然 有 的 浏览 器 开始 支持 handheld 
类 型 ， 但 由 于 市 面 上 割裂 的 支持 导致 没什么 人 专门 为 handheld 类 型 写 样式 表 ， 所 以 干脆 也 
废 掉 了 handheld 类 型 ， 直 接 支 持 screen， 这 样 导 致 了 @media 其 实 没 有 办 法 区 分 移动 设备 
和 桌面 设备 。 

CSS 3 的 media queries 模块 扩展 了 @media 的 应 用 范围 , 使 其 不 仅 能 识别 媒体 类 型 , 也 
能 识别 媒体 特征 一 一 比如 屏幕 宽度 ， 像 素 比 甚至 设备 色彩 等 参数 。 

media queries 的 语法 很 简单 ，@media 关键 字 后 跟 一 个 媒体 类 型 ， 然 后 再 跟 一 个 或 多 个 
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媒体 识别 条 件 的 表达 式 ， 每 个 条 件 用 and 来 连接 ， 如 果 设 备 满足 这 些 条 件 ， 那 么 最 后 就 应 
用 其 中 的 Css 代码 。 比 如 识别 iPhone 4 的 一 段 代码 可 能 是 这 样 的 : 
Gmedia all and (max-width:320px) and (-webkit-min-device-pixel-ratio:2)í( 
/* 在 这 里 编写 针对 iPhone retina 屏幕 的 代码 */ 
} 
除了 直接 写 入 CSS 代码 这 种 方式 以 外 ，media queries 规则 还 可 以 直接 写 到 link 元 素 的 
media 属性 中 ， 这 样 做 的 好 处 是 可 以 按 需 加 载 CSS 文件 : 


<link rel="stylesheet" href="wide.css" media="screen and 

(min-width:1024px)" /> 

此 外 还 可 以 使 用 not 关键 字 对 查询 结果 取 反 : 

@media not screen and (color) ( 

/* 非 显示 器 屏幕 且 是 彩色 的 《〈 比 如 彩电 ) */ 

b 

only 关键 字 本 身 没 什么 特别 的 用 ， 但 是 在 不 支持 only 的 用 户 代理 〈 浏 览 器 ) 中 ， 可 以 
用 来 隐藏 样式 表 : 

<link rel="stylesheet" media="only screen and (color)" href="example.css" 

/? 

除了 用 and 来 连接 表达 式 , 表达 式 之 问 也 可 以 由 有 逗号 来 分 割 , 这 时 候 其 语义 等 价 于 or: 


@media (min-width: 700px), handheld and (orientation: landscape) ( ... } 


就 这 个 例子 而 言 ， 如 果 使 用 一 个 有 显示 屏 的 设备 ， 且 其 显示 屏 的 视 口 宽 度 是 800px， 
那么 去 号 前 的 第 一 个 表达 式 的 查询 结果 将 会 是 tue， 整 个 语句 也 就 是 true 了 ， 因 此 代码 将 
会 应 用 。 同 样 的 ， 如 果 是 横 屏 使 用 一 个 视 口 宽 度 为 400 的 手持 设备 时 ，media 声明 的 第 一 
部 分 会 返回 false， 而 第 二 部 分 会 返回 tue， 因 此 整个 查询 会 返回 true。 

从 上 面 的 例子 中 可 以 看 到 ， 许 多 media 特征 都 会 有 “min-” 或 “max-” 前 级 ， 之 所 以 
不 用 > 符号 是 为 了 避免 和 HTML 或 者 XML 混淆 。 下 面 是 一 些 常见 的 可 供 查 询 media 的 
特性 。 

O color: 设备 色彩 ， 如 果 有 表示 彩色 设备 ， 如 果 想 进一步 查询 色彩 深度 ， 可 以 通过 

min-color 来 指定 ， 比 如 min-color: 4。 
O color-index: 使 用 索引 色 的 设备 , 可 以 通过 min-color-index 指定 查询 索引 色 的 色 数 。 
口 device-width: 设备 宽度 ， 有 max- 和 min- 版 本 ， 如 果 使 用 px 作为 单位 ， 则 指 的 是 
设备 的 物理 像素 ， 这 和 viewport 中 的 device-width 含义 是 不 一 样 的 。 
device-height: 设备 高 度 。 
width: 布局 视 口 宽度 ， 同 样 有 max- 和 min- 版 本 。 
height: 类 似 width。 
resolution: 解析 度 ， 依 然 是 有 max- 和 min- 版 本 ， 单 位 是 DPI (dots per inch) 或 者 
DPPX (dots per px unit) o DPI 和 PPI 是 类 似 的 单位 ， 大 部 分 情况 下 两 者 是 等 价 的 。 
在 基于 webkit 的 浏览 器 上 , 可 以 使 用 非 标准 的 -webkit-min-device-pixel-ratio 来 实现 
同样 的 查询 ， 而 且 更 方便 1 表示 普通 解析 度 的 屏幕 ，2 表示 retina 屏幕 。 当 使 
用 dppx 单位 时 ， 和 device-pixel-ratia 是 等 价 的 。 


口 口 口 口 
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O orientation: 屏幕 方向 ， 有 landscape (BEBÉ) 和 portrait ( 竖 屏 ) 两 种 选择 。 

除了 上 面 介绍 的 这 些 常用 的 媒体 特性 外 ，CSS 3 media queries 模块 还 提供 了 很 多 其 他 
特性 : 针对 电视 机 的 扫描 方式 (scan)、monochrome ( 单 色 ) 屏幕 、grid (位 图 ) 设备 和 aspect 
ratia〈 屏 幕 宽 高 比 ) 等 ， 配 合 使 用 几乎 能 定位 出 任意 两 种 不 同 设备 的 特征 。 

在 JavaScript 中 也 可 以 使 用 media queries。DOM 中 提供 了 MediaQueryList 对 象 接 口 ， 
通过 该 对 象 你 可 以 检查 媒体 查询 是 否 成 功 ， 甚 至 在 查询 结果 变化 时 还 能 自动 收 到 通知 。 在 
浏览 器 中 ， 得 到 一 个 MediaQueryList 实例 的 方式 是 调用 window.matchMedia 方法 : 

// 当前 是 否 是 竖 屏 状态 

var mql = window.matchMedia(" (orientation: portrait)"); 

一 旦 MediaQueryList 对 象 被 创建 ， 你 可 以 访问 它 的 matches 属性 来 查看 媒体 查询 的 结 
果 是 true 还 是 false: 


if (mql.matches) ( 
/* 此 时 设备 是 竖 屏 */ 
) else { 
/* 此 时 设备 是 横 屏 */ 
d 
如 果 你 想 在 横 屏 和 竖 屏 切换 时 接收 到 通知 ， 可 以 通过 MediaQueryList 对 象 的 
addListener 方法 来 订阅 事件 〈 不 用 指定 事件 名 )， 回 调 函 数 会 传 入 MediaQueryList 的 实例 : 
function handleOrientationChange (mql) ( 
if (mql.matches) ( 
/* 此 时 设备 的 当前 状态 是 竖 屏 */ 
} else { 
/* 此 时 设备 的 当前 状态 是 横 屏 */ 
) 
) 


var mql = window.matchMedia("(orientation: portrait)") 
mql.addListener (handleOrientationChange) 

// 先 调用 一 次 查询 代码 ， 以 便 我 们 知道 在 代码 执行 时 设备 处 于 哪 种 状态 
handleOrientationChange (mql) 


去 掉 订 阅 者 的 方法 是 调用 removeListener 方法 : 


mql.removeListener (handleOrientationChange) 


3.7.3. Ws HR RR ERE 


在 本 章 3.5 节 中 已 经 介绍 了 流 式 栅 格 系统 的 原理 ， 响 应 式 栅 格 系统 其 实 相 比 于 多 了 一 
些 媒体 查询 的 功能 而 已 ， 基 本 原理 是 没有 变化 的 。 在 设计 响应 式 栅 格 系统 的 时 候 ， 关 键 在 
于 你 需要 “响应 ”哪些 设备 ， 可 能 会 根据 需要 兼容 的 设备 特性 来 设 定 一 些 宽度 断 点 ， 基 于 
这 些 断 点 来 构建 media queries 的 代码 。 

一 个 较为 通用 的 断 点 设 定 如 下 : 

/* 较 大 的 显示 器 */ 

@media (min-width: 1200px) { ... } 

/* 通常 是 平板 电脑 */ 
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有 了 这 些 断 点 ， 那 么 就 很 容易 基于 之 前 的 栅 格 系统 来 编写 我 们 新 的 响应 式 栅 格 系 
8T: 


/* 这 里 是 可 能 一 些微 调 */ 


我 们 将 上 面 的 系统 应 用 到 一 个 简单 的 三 栏 布局 当中 去 : 


<div class="container"> 
<div class="row"> 
<div class="header">header</div> 
</div> 
<div class="row"> 
<div class-"coll"» nav</div> 
<div class-"col2"» main </div> 
<div class-"coll"» aside </div> 
«/div» 
<div class="row"> 
<div class="footer">footer</div> 


</div> 
</div> 
最 终 在 不 同 宽度 的 视 口 下 得 到 的 结果 如 图 3.81 所 示 。 
header 
[-— mon ogde 
header 
[一 man side 
header 
nav man | | | | | e 
footer 
header 
Es 
c —— HANE 
footer 


图 3.81 ”响应 式 栅 格 
著名 的 bootstrap 框架 中 也 实现 了 一 个 类 似 的 12 列 响应 式 栅 格 系统 。 它 的 responsive 
相关 代码 除了 布局 栅 格 外 ， 还 考虑 了 非常 多 的 细节 ， 如 果 读 者 要 在 真实 的 项 目 中 应 用 响应 
IAH, bootstrap 无 疑 是 一 个 非常 好 的 选择 。 


3.74 移动 优先 (mobile first) 理念 


响应 式 栅 格 系统 能 解决 部 分 的 布局 问题 ， 但 是 不 一 定 对 所 有 场景 都 适用 ， 在 桌面 网 页 
设计 中 一 些 常见 的 元 素 ， 如 固定 的 导航 条 、 相 册 展 示 和 被 文字 环绕 的 图 片 等 等 一 一 这 些 应 
用 在 较 小 屏幕 上 应 该 如 何 显示 ， 这 些 都 是 设计 师 以 及 前 端 工程 师 需要 仔细 考虑 的 问题 。 

在 过 去 大 多 网 站 都 是 以 传统 的 桌面 为 主 ， 如 果 有 兼容 手机 等 移动 设备 的 需求 ， 也 是 先 
制作 好 桌面 版 ， 然 后 向 小 屏 设 备 进行 移植 ， 如 图 3.82 所 示 。 


n: 


图 3.82 桌面 优先 优雅 降级 ) 


sil 
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然而 这 并 不 容易 ， 很 多 时 候 你 都 得 面 对 桌 面 版 网 站 写 出 许多 非常 hack 的 代码 ,以 砍 掉 


各 种 在 移动 设备 上 用 不 上 的 部 分 。 


如 今 互联 网 世界 正在 经 历 巨 大 的 变革 ， 移 动 端的 浏览 正在 逐渐 赶 超 桌面 端 ， 许 多 顶尖 


的 公司 和 团队 开始 推行 一 种 叫做 移动 优先 的 设计 理念 和 工程 理念 ， 如 图 3.83 所 示 。 


JOL- 


图 3.83 ”移动 优先 〈 渐 进 增强 ) 


口 对 于 产品 设计 师 ， 一 个 新 产品 ， 先 设计 移动 版 ， 然 后 才 是 桌面 版 。 

口 对 于 工程 师 ， 一 个 新 产品 ， 先 开发 移动 版 ， 然 后 才 是 桌面 版 。 

对 于 设计 师 或 者 工程 师 ， 移 动 优先 理念 有 这 样 一 些 好 处 : 

口 逼迫 你 在 更 瘦 的 客户 端 实现 你 的 核心 功能 ， 这 样 设 计 出 来 的 产品 功能 会 更 简洁 ， 
更 少 的 元 余 功能 。 

口 如 果 在 移动 设备 上 你 的 功能 都 是 可 用 的 ， 在 桌面 端 没 理由 不 可 用 。 

O 从 一 开始 就 考虑 在 计算 资源 和 网 络 资源 都 比较 低 的 情况 下 程序 的 运行 效率 ， 有 助 

写 出 性 能 更 好 的 程序 。 
口 在 程序 的 世界 里 ， 加 东西 通常 而 言 ， 是 比 删 东西 要 容易 的 。 
不 同 的 实现 ， 通 常 代 表 了 不 同 的 思想 ， 最 后 通常 也 会 导致 结果 巨大 的 不 同 。 如 今 


Google. Facebook 和 Adobe 等 等 顶尖 公司 的 程序 员 和 设计 师 们 都 开始 践 行 移动 优先 的 理念 


了 ， 


3.7. 


是 使 
BL. 
JE. 
Lr 


复 用 
设备 


作为 时 艇 前 端 工程 师 的 你 ， 没 理由 坐 以 待 毙 。 
5 另 一 种 思路 : 后 端 模板 输出 的 优化 


无 论 是 移动 优先 还 是 桌面 优先 ， 大 多 数 人 在 实现 时 ， 都 会 选择 media queries 技术 ,但 
用 media queries 时 ， 很 多 在 移动 设备 上 消减 的 功能 ， 只 能 简单 通过 隐藏 相应 元 素来 实 
这 样 昌 然 可 以 解决 样式 问题 ， 但 是 没 法 减少 HIML 的 传输 量 ， 如 果 你 只 有 一 个 CSS 
，CSS 本 身 也 比 单纯 的 移动 版 或 者 桌面 版 要 大 许多 。 面 对 各 种 资源 捉襟见肘 的 移动 设 
你 不 得 不 重新 思考 ， 是 否 有 别 的 方式 能 更 好 的 解决 这 一 问题 ? 

如 果 你 使 用 后 端 模板 ， 那 么 模块 化 可 能 是 你 的 绝 好 选择 。 这 里 的 模块 化 主要 指 的 是 可 
组 件 的 模板 ， 例 如 边栏 和 导航 这 些 都 可 以 做 成 模块 。 其 次 需要 在 后 端 判 断 是 否 是 移动 
在 访问 你 的 网 站 ， 这 时 候 没 有 办 法 使 用 media queries 这 样 的 技术 去 判断 设备 ， 只 能 通 


过 UA 来 判断 : 


function is mobile(ua) { 
var Irmobi = /(iphone|ipodlblackberry|android|palm|webos|psplblazer 
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lopera mini |ucweb|windows\s+ce|windows\s+phone|iemobile|nexus 7|meego)/ 
return rmobi.test (ua) 


} 
那么 最 后 你 的 模板 可 能 是 类 似 这 样 的 : 


«html» 
<head> 
<link rel="stylesheet" href="common.css"> 
<% if (!is mobile()) {%> 
<link rel="stylesheet" href="desktop.css"> 
<% ) else { %> 
<link rel="stylesheet" href="mobile.css"> 
«8 ) > 
</head> 
<body> 
<div class="header"></div> 
<div class="main"> 

<div class="main-content"></div> 

<% if (!is mobile()) {%> 

<div class-"side"»«/div» 

<% ) 9» 
«/div» 
<div class-"footer"»«/div» 
</body> 
</html> 


当然 JavaScript 也 可 以 使 用 同样 的 方式 输出 ， 以 便 整个 页 面 在 移动 设备 中 具备 更 优 的 
性 能 。 


37.6 ”其 他 细节 


在 针对 移动 设备 一 一 尤其 是 Android 和 iPhone 这 样 的 触摸 屏 手机 进行 设计 时 ， 还 有 许 
多 细节 值得 前 端 工程 师 们 注意 。 

1. 触摸 和 非 触摸 

在 使 用 鼠标 或 者 触摸 板 为 主要 页 面 交 互 方式 的 桌面 网 页 ， 设 计 师 们 经 常会 设计 许多 
mouse hover 效果 ， 但 在 触摸 屏 上 面 ， 通 常 是 不 会 出 现 鼠 标 这 样 的 东西 。 因 此 hover 状态 会 
显得 非常 多 余 , 我 们 可 以 通过 检测 window 中 有 无 ontouchstart 事件 来 判断 设备 是 否 触摸 屏 ， 
然后 为 html 元 素 加 上 相应 的 class: 


document.documentElement.className += ('ontouchstart' in window) ? ' touch' : 
' no-touch' 


在 CSS 中 就 可 以 利用 这 些 class 来 禁用 或 开启 禁用 hover 效果 : 
html.no-touch .item:hover { 
cursor: pointer; 


background-color: #ff9; 
} 


2. retina 屏幕 的 图 片 使 用 
因为 retina 屏幕 的 高 解析 度 ， 普 通 图 片 在 显示 时 总 会 有 非常 模糊 的 感觉 。 拿 iPhone 为 


i 
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例 , 这 是 因为 图 片 的 每 个 像素 点 被 投射 到 四 个 物理 像素 点 上 进行 显示 , 这 样 自然 不 会 清晰 ， 
为 了 适 配 这 样 的 屏幕 ,通常 利用 CSS If] media queries 在 普通 解析 度 的 情况 下 加 载 普通 图 片 ， 
在 高 解析 度 情 况 下 下 载 @2x 图 片 , 然后 使 用 background-size 属性 将 图 片 缩 小 一 倍 可 以 解决 
背景 图 模糊 的 问题 : 


Loon | 
background-image: url(icon.png); 


(media all and (max-width:320px) and (-webkit-min-device-pixel-ratio:2)( 
-icon | 
background-size: 50% 50$; 
} 
T 


解决 了 背景 图 ， 内 容 图 Gmg 标签 ) 便 成 了 个 大 问题 ，W3C 社区 讨论 组 对 于 响应 式 图 
片 的 最 新 示例 是 这 样 : 
Xpicture width-"500" height="500"> 
<source media=" (min-width: 45em)" srcset-"large-1.jpg 1x, large-2.jpg 
ES 
<source media-" (min-width: 18em)" srcset-"med-1.jpg 1x, med-2.jpg 2x"» 
<source srcset-"small-1.jpg 1x, small-2.jpg 2x"> 
<!-- 不 支持 的 浏览 器 将 使 用 img 标签 --> 
<img src-"small-1.jpg" alt=""> 
<p>Accessible text</p> 
</picture> 


img 标签 被 新 的 picture 标签 蔡 代 ，picture 内 部 可 以 指定 多 个 source, 44^ source 可 以 
匹配 一 条 媒体 查询 ， 同 时 可 以 针对 不 同 dppx 指定 不 同 图 片 〈srcset)。 与 此 同时 ，Apple 提 
出 了 一 个 不 同 的 方案 : 

<img src-"foo-lores.jpg" 

srcset-"foo-hires.jpg 2x, 
foo-superduperhires.jpg 6.5x" 

alt-"decent alt text for foo."» 

遗憾 的 是 这 两 种 方案 没 成 为 官方 规范 (Unofficial Draft)， 也 没有 浏览 器 完整 支持 
它们 。 

响应 式 设计 的 内 容 远 不 是 一 节 内 容 甚至 一 章 内 容 能 讲 完 讲 透 的 ， 而 且 ， 作 为 还 在 不 断 
发 展 的 一 门 新 技术 ， 必 将 有 更 多 的 工具 、 技 巧 、 规 范 和 最 佳 实践 会 不 断 诞 生 。 在 设计 和 开 
发 中 多 思考 多 动手 多 总 结 ， 只 有 这 一 点 是 永远 不 会 变 的 。 
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SAH CAPP) 这 个 词 已 经 是 遍地 开花 ， 尤 其 是 在 移动 开发 领域 。 做 原生 应 用 还 是 
Web A aen nth ti ERI SÉ p Bl. 
本 章 将 介绍 类 客户 端 Web 应 用 的 开发 中 会 遇 到 哪些 困难 ，HTML 5 提供 的 解决 方式 是 
什么 。 


41 Web 不 能 承受 之 重 


Web 一 词 在 英文 中 的 本 意 是 网 络 、 结 网 ， 而 这 个 网 络 的 节点 ， 便 是 网 页 (Web page)， 
如 图 4.1 所 示 。 在 过 去 ， 网 页 通常 就 是 一 篇 文档 (Document)， 通 常 来 说 是 HTML 文档 ， 
然 也 可 以 是 其 他 类 型 的 文档 (PDF、XML 和 SVG 等 )。 

一 篇 文档 就 像 一 张 纸 一 样 ， 轻 而 薄 ， 它 包含 一 定量 的 信息 ， 通 过 互联 网 ， 这 些 信息 被 
链接 起 来 ， 供 人 分 享 和 查阅 一 一 这 便 是 最 初 的 Web， 一 个 轻巧 而 单纯 的 网 络 。 但 人 们 发 现 
us o 换 信 息 ， 它 还 可 以 做 更 多 的 事 儿 。 于 是 渐渐 地 Web 被 赋 
P$ esaet 学 术 论 文 的 交流 到 普通 人 博客 的 撰写 、 从 文献 索引 到 网 络 购物 、 从 邮 
件 到 论 0 产 力 工具 …… 功 能 越 来 越 多 ， 网 页 也 越 来 越 复杂 ， 越 来 越 重 ， 整 
个 Web ples 朝 着 客户 端 软件 的 方向 发 展 。 


-9-9 YxHoOo! $9 98 


—— "i CLICK Looking for a 


lik 


Mars Wina 520,000 Trip! HERE! Car? Job? Date? 
earch | options 
Yellow Pages - People Search - Maps - Classifieds - News - Stock Quotes - Sports Scores 
* Arts and Humanities * News and Media [Xtra!] 
Architecture. Photography. Literature... Current Events. Magazines. TV. Newspapers... 


* Business and Economy [Xtra!] * Recreation and Sports [Xtra!] 
Companies, Investing, Employment... Sports, Games, Travel, Autos, Outdoors... 


e Computers and Internet [Xtra'] * Reference 
Intemet, WWW, Software, Multimedia... Libraries, Dictionaries, Phone Numbers... 


图 4.1 90 年 代 的 Yahoo 
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为 了 满足 人 们 对 Web 日 益 增长 的 需求 , 浏览 器 的 功能 也 变 得 越 来 越 强 大 ， 从 最 初 只 能 
看 看 文档 的 “浏览 ”器 ， 到 如 今 已 成 为 和 操作 系统 平 级 的 系统 软件 (Chrome OS 便 是 一 个 
旗帜 鲜明 的 例子 ), 浏览 器 发 展 的 迅猛 与 Web 标准 发 展 的 迟滞 形成 了 鲜明 对 比 。 而 HIML 5 
则 成 为 推动 标准 迅速 演进 的 重要 转折 点 ，HTML 5 标准 中 提出 的 一 些 特性 使 得 实现 复杂 用 


户 界面 的 Web 程序 更 加 容易 和 高 效 。 


例如 ，app 


licationcache, manifest 和 localStorage 等 技术 使 基于 浏览 器 的 离线 应 用 成 为 


可 能 ， 定 位 API Cgeolocation api) 可 以 让 你 轻松 获取 设备 的 地 理 位 置 ， 触 摸 事 件 让 用 户 在 
网 页 上 也 可 以 做 出 手势 指令 , File API 可 以 让 你 使 用 JavaScript 操作 本 地 文件 …… 所 有 这 一 
切 技术 似乎 都 意味 着 一 件 事 情 : Web APP 的 时 代 ， 已 经 悄然 到 来 ， 如 图 4.2 所 示 。 


图 4.2 Web APP 时 代 


4.2 本 地 存储 升级 


传统 的 网 页 和 客户 端 软件 之 间 的 一 个 很 大 的 区 别 便 是 后 者 会 在 用 户 的 机 器 上 存储 数 
据 ， 在 以 前 ， 浏 览 器 几乎 不 具备 太 多 的 本 地 存储 能 力 ， 这 使 得 在 浏览 器 端 迟 迟 没有 出 现 诸 
如 Excel 和 Word 等 数据 型 程序 〈 没 人 喜欢 写 到 一 半 的 文档 就 消失 了 的 情况 )。HTML 5 在 


存储 方面 做 了 对 


大 的 改进 ,提供 了 1oacalStorage 和 sessionStorage 对 象 用 于 小 型 数据 的 存储 ， 


更 提供 了 Web Database 以 存储 大 量 数据 。 


4.2.1 cookie 和 cookie 的 局 限 


HTTP 本 身 是 一 种 无 状态 、 无 链接 的 协议 ， 用 户 在 浏览 器 上 请 求 一 个 动作 时 ， 服 务 器 
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不 会 知道 用 户 上 次 动作 做 了 什么 ， 因 此 如 果 要 存储 诸如 登录 与 否 、 已 录入 文本 等 状态 信息 
是 非常 麻烦 的 ， 对 于 开发 交互 式 的 程序 来 说 这 很 致命 ， 而 cookie 技术 的 发 明 则 满足 了 大 部 
分 的 状态 存储 的 需求 。 从 根本 上 来 讲 ，cookie 其 实 就 是 一 段 存储 在 客户 端 〈 浏 览 器 ) HOC 
本 ， 我 们 既 可 以 在 服务 器 响应 返回 时 设置 cookie 的 值 ， 也 可 以 在 前 端 通过 JavaScript 进行 
修改 。 


1. cookie 是 如 何 存储 的 


我 们 考虑 一 个 最 简单 的 登录 场景 来 说 明 cookie 是 如 何 实现 状态 存储 的 。 当 你 向 百度 服 
务 器 发 送 了 你 的 用 户 名 密码 并 且 验 证 过 你 的 身份 之 后 ， 服 务 器 端 会 在 响应 客户 端 时 的 
HTTP 包 的 包头 中 加 上 一 个 Set-Cookie 字段 ， 这 个 字段 则 可 能 是 类 似 uid=123 的 值 ， 是 服 
务 器 分 配给 你 的 标识 符 ， 这 段 文本 将 存储 在 你 的 计算 机 磁盘 中 ， 当 你 继续 浏览 百度 的 其 他 
页 面 时 ， 每 次 HTTP 请 求 都 会 带 上 cookie 这 个 字段 ， 这 样 服务 器 端 就 可 以 确认 这 个 请 求 依 
然 来 自 于 登录 后 的 你 ， 从 而 从 某 种 意义 上 来 说 “保存 ”了 登录 状态 ， 这 时 读者 可 能 要 问 了 ， 
不 同 网 站 登录 时 都 会 发 送 吗 ? 那 岂 不 是 谷歌 就 可 以 知道 我 百度 的 账号 了 ? 当然 不 是 ， 
cookie 的 使 用 是 有 限制 的 ， 这 个 限制 便 来 自 于 域 ， 不 同 域 间 的 cookie 是 不 会 影响 也 不 可 访 
问 的 。 

如 图 4.3 所 示 ， 用 户 浏览 器 第 一 次 向 服务 器 发 送 请 求 (Request) 时 ， 服 务 器 会 返回 
Set-Cookie:xxx， 浏 览 器 会 记 下 xxx， 当 浏览 器 再 度 请 求 服务 器 会 带 上 Cookie:xxx。 


Request 


j 
Response 
一 
Set-Cookie: xxx 


Request 


Cookie: xxx 


Response 
一 
图 4.3 cookie 的 原理 
AFE: 域 限制 是 cookie 安全 的 基础 ， 这 个 话题 有 很 多 值得 深入 讨论 的 点 ， 如 跨 父 域 子 域 
进行 AJAX 访问 ， 多 个 域名 时 如 何 跨 域 进 行 身份 验证 等 。 


从 上 面 的 例子 很 容易 理解 ，uid 是 一 个 cookie 的 名 称 Cname)， 用 于 唯一 标识 一 个 具体 
的 cookie， 但 cookie 的 名 称 是 不 区 分 大 小 写 的 。 例 如 ，uid 和 UID 标识 了 同一 个 cookie; 
而 123 则 是 该 cookie 的 值 (value)， 除 了 名 值 外 ，cookie 还 包含 域 、 路 径 和 失效 时 间 等 信 
息 ， 所 有 这 些 信 息 都 可 以 通过 前 端 或 后 端 两 个 途径 进行 设置 。 下 面 讨论 浏览 器 端的 cookie 
操作 服务 器 端 如 何 设置 cookie 不 是 我 们 的 重点 )。 


2. cookie 的 基本 操作 
在 浏览 器 上 我 们 通过 对 document.cookie 属性 的 存 取 来 操作 cookie。 随 便 打开 一 个 网 页 ， 
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在 chrome 控制 台中 键入 document.cookie 后 回 车 即 可 以 看 到 此 页 面 下 可 用 的 完整 的 cookie 
内 容 ， 会 是 个 如 下 形式 的 值 : 

"xsrf-3779292c; uid=EPACMJGJBNKKLOFF; Serial-27EA" 

可 以 看 到 document.cookie 属性 是 一 些 由 分 号 分 割 的 名 值 对 组 成 的 字符 串 。 如 果 要 设置 
一 个 cookie， 我 们 可 以 这 样 做 : 

document.cookie-"uid1-123" 

这 时 我 们 创建 了 名 为 uidl， 值 为 123 的 cookie. document.cookie 并 不 仅仅 是 一 个 普 i 
的 字符 串 ， 这 个 属性 有 着 很 奇怪 的 特性 ， 虽 然 上 面 的 语句 看 起 来 是 赋值 语句 ， 但 却 不 会 覆 
i cookie 原来 的 值 ， 而 是 会 将 新 cookie 添加 到 后 面 ， 创 建 完毕 后 的 document.cookie 会 是 
这 样 : 

"xsrf-3779292c; uid=EPACMJGJBNKKLOFF; Serial-27EA;uid1-123" 

可 以 看 到 新 创建 的 cookie 添加 到 后 面 了 ， 但 由 于 直接 访问 document.cookie 只 能 获取 
到 完整 的 字符 串 ， 要 进一步 获取 具体 的 键 值 对 就 必须 得 手工 操作 这 个 字符 串 。 

3. 简化 cookie 操作 


为 了 方便 地 操作 cookie， 我 们 可 以 封装 名 两 个 函数 ， 名 为 getCookie 和 setCookie: 


function getCookie (name) { 
var cookieName = encodeURIComponent (name) + "-", 


cookieStart = document.cookie.indexOf (cookieName), 
cookieValue - null, 
cookieEnd; 


if(cookieStart » -1) ( 
cookieEnd = document.cookie.indexOf(";", cookieStart) 
if(cookieEnd -- -1) ( 
cookieEnd = document.cookie.length 
) 
cookieValue - 
decodeURIComponent (document.cookie.substring (cookieStart 十 
cookieName.length, cookieEnd)) 
} 
return cookieValue 


} 


function setCookie(name, value, opt expires, opt path, opt domain, 
opt secure) { 

var cookieText = encodeURIComponent (name) + "=" +  encodeURICom 
ponent (value) 


if(opt expires instanceof Date) { 
//cookie 的 过 期 时 间 只 支持 GMT 格式 
cookieText t= "; expires-" + opt expires.toGMTString() 
b 
if(opt path) ( 
//path 表示 cookie 起 作用 的 路 径 ， 比 如 /pathi 下 设置 的 cookie，path2 的 页 面 则 无 
法 访问 
cookieText += "; path-" + opt path 


} 
if(opt domain) ( 
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// 只 能 设置 子 域 ， 而 不 能 跨 根 域 
cookieText += "; domain-" + opt domain 
} 
if (opt secure) { // 安 全 标志 ,指定 该 标志 后 只 有 在 使 用 SSL 连接 时 才 会 发 送 cookie (HI 
发 送 到 https:// 开 头 的 域 ) 
cookieText += "; secure" 
H 
document.cookie = cookieText 


) 


代码 完整 展示 了 如 何 存 取 一 个 具体 的 cookie， 之 所 以 在 每 个 过 程 都 使 用 encode 
URIComponent 和 decodeURIComponent 对 名 值 对 儿 进 行 编 解 码 是 为 了 确保 cookie 能 被 正 
人 确 发 送 到 服务 器 。setCookie0 函 数 中 只 有 key 和 value 是 必须 的 ，domain 等 参数 可 选 日 不 
会 发 送 到 服务 器 ， 比 如 现在 要 想 获取 名 uid 的 cookie 值 ， 并 在 后 面 加 上 4， 我 们 可 以 这 
样 做 : 


setCookie('uid', getCookie('uid') + 4) 


如 果 要 删除 一 个 cookie， 我 们 只 需要 将 key 的 值 设 置 为 空 字符 串 ， 并 将 它 的 过 期 时 间 
设置 为 过 去 的 时 间 即 可 ， 由 此 可 以 得 到 下 面 这 个 unsetCookieQ FR Zt: 


function unsetCookie (name, path, domain, secure) { 
setCookie (name, "", new Date(0), path, domain, secure); 


d 
如 此 一 来 这 个 鉴 脚 的 接口 已 经 变 得 很 方便 开发 人 员 操 作 了 。 
4. cookie 的 其 他 限制 


除了 前 面 提 到 的 域 限制 以 外 ，cookie 还 有 一 些 其 他 的 限制 ， 其 中 比较 重要 的 便 是 大 小 
和 数量 限制 。 不 同 浏览 器 在 实现 cookie 时 ， 采 用 了 不 同 的 限制 策略 。 常 见 浏览 器 在 cookie 
数量 上 的 限制 如 下 : 

O 三 6 及 更 低 版 本 每 个 域 最 多 20 个 cookie. 
IE 7 及 更 高 版 本 每 个 域 最 多 50 个 cookie. 
Firefox 每 个 域 最 多 50 个 cookie。 
Opera 为 每 个 域 30 个 cookie。 
Webkit 内 核 (Safari & Chrome) 没有 对 cookie 数量 做 明确 限制 ， 但 是 如 果 cookie 
太 大 以 至 于 超过 了 HTTP 头 部 大 小 限制 时 ， 服 务 器 将 无 法 正确 处 理 。 

为 了 突破 cookie 个 数 限制 , 可 以 采用 一 种 名 为 子 cookie 的 技术 , 其 基本 原理 是 在 一 个 
cookie 内 存储 多 个 名 值 对 ， 限 于 篇 幅 ， 本 书 不 再 详 述 。 

除了 数量 限制 , 浏览 器 对 cookie 的 尺寸 也 做 了 限制 , 大 多 数 浏 览 器 都 将 cookie 的 尺寸 
限制 在 4096B 左右 。 

虽然 cookie 会 存在 用 户 磁 盘 里 ,但 严格 地 说 cookie 并 不 能 算是 本 地 存储 技术 。 因 为 每 
次 请 求 站 点 的 所 有 cookie 都 会 被 发 送 到 服务 器 , 如 果 将 太 多 数据 存放 在 cookie 当中 会 严重 
降低 传输 性 能 ， 加 上 cookie 本 身 还 有 大 小 和 数量 限制 ， 所 以 cookie 并 不 适合 在 客户 端 存储 
数据 。 如 果 要 在 本 地 存储 大 量 数据 ， 还 得 另 寻 其 他 方式 。 
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4.2.2 来 自 HTML 5 的 Web Storage 


相 较 于 Cookie 的 各 种 限制 而 言 ，HTML 5 规范 中 的 Web Storage 更 适合 用 作 本 地 数据 
存储 。Web Storage 的 使 用 非常 方便 ， 速 度 更 快 ， 也 更 加 安全 ， 只 会 存储 在 浏览 器 中 而 不 会 
随 HTTP 请 求 发 送 到 服务 器 端 。 它 可 以 轻松 存储 大 量 数据 而 丝毫 不 会 影响 你 网 站 的 性 能 。 


1. Web Storage 使 用 


Storage 在 浏览 器 中 被 实现 为 一 个 类 型 ， 但 开发 者 是 不 被 允许 实例 化 Storage 对 象 的 ， 
浏览 器 已 经 内 置 有 两 个 已 经 实例 化 好 的 对 象 ,一 个 是 sessionStorage, 另 一 个 是 localStorage。 
其 中 ，sessionStorage 中 存储 的 数据 只 在 单个 页 面 的 会 话 期 间 有 效 ，sessionStorage 更 类 似 于 
一 个 页 面 上 的 全 局 变量 ; 而 localStorage 的 数据 则 会 被 持久 化 到 客户 端 , 而 且 永 远 不 会 过 期 
Ccookie 是 可 以 设置 过 期 时 间 的 )， 并 且 其 容量 也 不 像 cookie 那样 受 限 ， 因 此 localStorage 
成 为 了 我 们 存储 本 地 数据 的 不 二 之 选 。 来 看 一 个 简单 的 例子 以 了 解 其 基本 使 用 方法 : 

if(window.localStorage) { // 检 测 浏览 器 是 否 支持 localStorage 

// 存 储 几 个 键 值 对 
localStorage['book'] = 'HTML5 移动 开发 ' 


localStorage.setItem('author', 'filod lin') 
localStorage.setItem('2012', 'end of the world') 


// 读 取 它 们 

console.1log(localStorage.getItem('book')) //HTML 5 移动 开发 
console.log(localStorage.author) //filod lin 
console.log(localStorage['2012']) //end of the world 
// 删 除 它们 

delete localStorage['author'] 
console.log(localStorage['author']) //undefined 
localStorage.removeltem('2012') 
console.log(localStorage.getlItem('2012')) //null 
localStorage.clear() // 删 除 所 有 的 key 


} 
可 以 看 到 使 用 localStorage 读 写 数据 很 方便 , 既 可 以 像 操作 普通 JavaScript 那样 去 存 取 ， 
也 可 以 使 用 setItem getItem 和 removeItem 方 法 来 存 . 取 和 删除 key。 要 注意 的 是 ,localStorage 
和 普通 对 象 的 不 同 之 处 在 于 只 能 存储 字符 串 ， 如 果 你 试图 存储 其 他 类 型 的 数据 ， 将 会 被 强 
制 转换 成 字符 串 。 下 面 的 例子 最 后 会 在 控制 台 打印 出 [object Object]: 
var author = ( 
'name': 'filod lin' 


localStorage['author'] = author 
console.log(localStorage['author']) //[object Object] 


如 果 要 存储 JSON 对 象 ， 则 可 以 先 使 用 window.JSON 对 象 提 供 的 stringify 和 parse 77 
法 对 JSON 数据 进行 序列 化 和 反 序 列 化 : 


localStorage['author'] = JSON.stringify (author) 
console.log(JSON.parse (localStorage['author']).name) //filod lin 
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localStorage 对 象 的 关键 便 在 于 持久 化 数据 ， 当 我 们 关闭 浏览 器 再 打开 网 站 ， 依 然 可 以 
访问 到 这 个 域 存储 的 数据 。 
由 于 localStorage 与 sessionStorage 都 是 Storage 的 实例 , 你 可 以 完全 使 用 和 localStorage 
相同 的 方式 去 使 用 sessionStorage， 它 们 共享 Storage 接口 提供 的 一 组 方法 和 属性 : 
setItem(key, value) 设 置 一 个 key。 
getItem(key) 获 取 一 个 key。 
removelItem(key) 移 除 一 个 key。 
length 类 似 数 组 length 属性 ， 用 于 访问 Storage 对 象 中 item 的 数量 。 
key(n) 用 于 访问 第 n 个 key 的 名 称 ， 如 local。 
clear0 清 除 当前 域 下 的 所 有 localStorage 内 容 。 
而 sessionStorage 和 localStorage 不 同 之 处 在 于 存 取 数据 生命 周期 不 一 样 ， 只 要 一 直 在 
这 个 域内 连续 访问 ,存储 在 sessionStorage 的 数据 会 一 直 存 在 , 而 一 旦 关闭 页 面 或 者 浏览 器 
后 所 有 存储 的 内 容 便 消失 了 〈 这 意味 着 sessionStorage 不 会 将 数据 存 入 磁盘 )。 


2. storage 事件 


对 Storage 对 象 进行 的 所 有 修改 都 会 触发 文档 上 的 storage 事件 。 其 中 事件 对 象 会 有 以 
下 属性 。 
口 domain: 发 生变 化 的 域名 。 
口 key: 发 生 修改 的 键 。 
O oldValue: 修改 前 的 值 。 
O newValue: 修改 后 的 值 (如 果 是 删除 一 个 键 ， 则 为 null) 。 
下 面 的 代码 展示 了 如 何 监听 该 事件 : 
document.addEventListener("storage", function(e) ( 
// 截 止 到 目前 为 止 ， 尚 无 浏览 器 完整 实现 这 些 事件 属性 
//console.log("Storage changed. Name '" + e.key + "' changed from '" + 


e.oldValue + "' to '" + e.newValue + "'") 


}) 

sessionStorage 和 localStorage 都 会 触发 此 事件 ， 但 无 法 区 分 究 况 是 谁 触发 的 事件 。 而 
且 这 个 事件 现 目前 尚 有 兼容 性 问题 ， 所 以 不 建议 使 用 此 事件 。 

要 注意 ，IE 8 中 的 Web Storage 有 10MB 的 存储 容量 限制 ， 而 Firefox. Google Chrome 
和 Opera 中 每 个 域名 可 以 存储 5MB 的 数据 ,不 过 对 于 大 多 数 的 应 用 来 说 5MB 已 经 足够 了 。 
Hh, IE 提供 了 一 个 非 标准 的 remainingSpace 属性 用 于 查看 剩余 多 少 可 用 空间 (单位 是 字 
节 )。 下 面 这 个 函数 可 以 获取 剩余 容量 的 百分比 : 


function getRemainingSpacePercent() { 
if(localStorage.remainingSpace) { 
return localStorage.remainingSpace / 5000000 * 100 


) 
E 


3. 应 用 Web Storage 的 示例 

如 果 你 想 实 现 一 些 需要 在 本 地 存储 数据 的 功能 ， 比 如 记 住 用 户 偏好 或 个 性 化 设置 、 恢 
复 页 面 上 次 打开 状态 等 等 ，Web Storage 会 是 一 个 绝 佳 的 选择 。 下 面 我 们 来 实现 一 个 页 面 
访问 计数 器 的 例子 练 练 手 : 
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本 次 访问 已 经 查看 过 该 页 面 <span id-"counti"»«/span» 次 <br /> 
历史 上 你 已 经 查看 过 该 页 面 <span id="count2"></span> 次 <br /> 
<button id="btn"> 清 零 </button> 
<script type="text/javascript"> 
function updateCounter () { 
document .getElementById ("count1") . innerHTML = sessionStorage.pageLoadCount 
11 0; 
document . getElementById ("count2") .innerHTML = localStorage.pageLoadCount 
11 0; 
上 
// 第 一 次 进入 页 面 时 ， 将 两 个 计数 都 置 为 0 
if(localStorage.getlItem("pageLoadCount") === null ( 
localStorage.setItem("pageLoadCount", 0) 
H 
if(sessionStorage.getlItem("pageLoadCount") === null ) ( 
sessionStorage.setItem("pageLoadCount", 0) 
} 
// 每 次 加 载 页 面 ， 把 存储 的 数据 取出 后 增 1 
localStorage.pageLoadCount = parseInt (localStorage.getItem("pageLoadCount")) 
wA 
sessionStorage.pageLoadCount = parseInt (sessionStorage.getItem("pageLoad- 
Count")) + 1 
updateCounter () 
document .getElementById ("btn") .onclick = function () { 
localStorage.clear() 
sessionStorage.clear() 
updateCounter () 


) 
</script> 


打开 这 个 页 面 后 ， 不 断 刷 新 ， 你 会 看 到 两 个 次 数 都 会 不 断 上 涨 ， 而 关闭 浏览 器 后 再 打 
开 ， 则 只 有 历史 计数 还 存在 。 单 击 “ 清 零 ”按钮 则 会 将 两 个 计数 都 置 为 零 ， 另 外 在 Chrome 
或 Safari 开发 者 工具 的 资源 (Resources) 面板 中 可 以 方便 地 查看 、 调 试 localStorage 和 
sessionStorage， 如 图 4.4 所 示 。 

这 和 过 HE E LA SK ug a, © a E c 
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Web Storage 在 桌面 和 移动 设备 的 浏览 器 中 都 有 很 好 的 支持 ， 除 了 Opera Mini 和 下 8 
以 下 版 本 的 浏览 器 外 ， 基 本 上 其 他 浏览 器 都 可 以 完美 支持 。 


4.2.8 IE 的 userData 


在 Web Storage 出 现 之 前 很 久 的 时 候 ， 正 上 面 已 经 有 一 套 本 地 存储 的 方案 了 ， 这 便 是 
userData。 下 面 简要 介绍 一 下 userData 如 何 使 用 。 

IE 里 启用 userData 方式 比较 奇怪 ， 需 要 为 一 个 具体 元 素 使 用 CSS 指定 用 户 数 据 存储 
行为 而 不 是 存储 在 一 个 对 象 里 : 

yk type="hidden" style-"behavior:url (4defaultfuserData)" id-"dataTarget" 

> 
指定 了 userData 行为 的 元 素 将 可 以 用 来 存储 数据 : 
var dataStore = document.getElementById ("dataTarget"); 


// 使 用 Load 方法 指定 要 加 载 的 存储 命名 空间 
dataStore.load('storeNS'); 


// 使 用 getAttribute 获取 存储 的 数据 
alert (dataStore.getAttribute ('author')) 


// 使 用 setAttribute 在 元 素 上 面 保存 数据 
dataStore.setAttribute('author', 'filod'); 


// 必 须 调用 save 方法 来 才能 持久 化 数据 到 磁盘 中 

dataStore.save('storeNS'); 

上 面 的 例子 页 面 在 第 一 次 加 载 时 ， 会 弹出 null， 刷 新 后 则 会 弹出 包 od。 若 需要 删除 数 
自然 应 该 使 用 removeAttribute 方法 : 


dataStore.removeAttribute ('author') 


// 删 除 之 后 也 必须 调用 save 方法 才能 生效 


dataStore.save('storeNS') 


IE 提供 的 userData 同样 有 大 小 限制 一 一 每 个 文档 128KB 每 个 域名 IMB, 由 于 自 IE8 
起 TE 就 已 经 较 好 地 支持 Web Storage 了 ， 所 以 笔者 并 不 建议 使 用 userData 来 存储 数据 。 


S 


43 离线 应 用 


长 时 间 以 来 ， 你 或 许 都 能 在 各 种 地 方 听 到 关于 一 个 应 用 是 选用 CS CClient&Server) 4 
构 还 是 BS (BrowserServer) 架构 的 各 种 争论 ， 其 关于 CS 架构 优点 的 中 心思 想 无 非 这 样 
几 点 : 
口 CS 架构 的 应 用 更 适合 构建 高 性 能 的 程序 ， 更 能 发 挥 客户 端的 计算 优势 。 
口 cs 架构 用 户 界 面 响应 更 迅速 ， 用 户 体验 更 好 。 
O CS 架构 无 需 依赖 网 络 ， 在 没有 网 络 的 情况 下 你 的 程序 依然 可 以 继续 使 用 ， 你 的 工 
作 状 态 和 结果 都 不 会 丢失 。 
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然而 ， 随 着 计算 机 性 能 的 提升 和 浏览 器 功能 的 日 益 强大 ，CS 应 用 相 较 于 BS 应 用 的 优 
点 越 来 越 失 去 了 优势 , 或 者 说 CS 架构 和 BS 架构 之 间 的 界限 越 来 越 模糊 , 浏览 器 相对 用 户 
越 来 越 透明 ， 谷 歌 甚至 在 2009 年 发 布 了 基于 Chrome 浏览 器 的 操作 系统 Chrome OS, 操作 
系统 就 是 浏览 器 ， 应 用 程序 就 是 网 页 。 
上 时 至 今日 ， 操 作 系统 厂商 之 间 的 战争 ， 已 经 变 成 了 浏览 器 厂商 之 间 的 战争 ， 基 于 浏览 
器 的 应 用 程序 商店 也 是 遍地 开花 ， 人 们 不 再 谈论 “网 站 ”还 是 “客户 端 ? 时 亦 地 讲 ， 这 是 
一 个 APP 的 时 代 。 
HTML 5 显然 也 是 在 APP 时 代 能 够 大 显 身 手 的 技术 流派 ， 为 了 解决 网 络 依赖 和 用 户 界 
应 等 问题 ，HTML 5 也 提出 相应 的 解决 方案 。 

过 去 很 长 一 段 时 间 里 ， 浏 览 器 端 软件 无 法 完全 和 客户 端 软件 媲美 的 一 个 重要 原因 就 在 
于 : 一 旦 断 了 网 ， 浏 览 器 上 就 成 了 一 个 废物 ， 一 切 工作 将 都 进行 不 下 去 了 。 而 HTML 5, 
试图 改变 这 一 现状 。 


4.3.1 缓存 和 应 用 缓存 


1. 为 何 我 们 需要 缓存 


从 根本 上 来 讲 ， 计 算 机 满足 了 人 们 的 计算 需求 ， 而 缓存 的 目的 则 是 为 了 节省 计算 量 。 
缓存 从 来 都 是 计算 机 工程 领域 解决 疑难 杂 症 的 法 宝 , 无 论 是 CPU 一 级 二 级 缓存 , 还 是 内 存 
磁盘 缓存 …… 缓 存在 计算 机 里 面 几乎 无 处 不 在 ! 

对 于 Web 前 端 开发 , 缓存 思想 的 应 用 也 是 随处 可 见 一 一 在 内 存 中 使 用 闭 包 缓 存 对 象 或 
者 数据 、 在 浏览 器 缓存 JS 或 CSS 文件 、 使 用 CDN 分 发 静态 文件 …… 

不 过 闭 包 缓存 结果 和 CDN 分 发 等 等 不 是 我 们 的 重点 ， 现 在 要 讲 的 是 HTML 5 提供 的 
一 种 独特 的 缓存 机 制 ，Application Cache 〈 应 用 缓存 )。 


2. 应 用 缓存 能 做 什么 


应 用 缓存 ， 顾 名 思 义 ， 是 为 应 用 程序 而 生 的 缓存 机 制 。 简 单 来 说 ， 它 能 将 服务 器 端的 
资源 文件 缓存 至 本 地 ， 至 少 可 以 为 你 带 来 三 个 优点 : 
口 加 速 应 用 启动 速度 一 一 省 却 了 下 载 文件 的 时 间 。 
口 离线 访问 一 一 对 于 目前 网 络 状况 还 不 算 好 (尤其 在 中 国 ) 的 移动 设备 而 言 ， 能 
离线 浏览 存 下 来 的 页 面 或 者 继续 未 完成 的 工作 。 
口 节省 服务 器 资源 一 一 更 少 的 请 求 ， 就 意味 着 更 小 的 服务 器 压力 。 
是 不 是 动心 了 ? 下面 就 来 看 看 如 何 使 用 应 用 缓存 。 


4.3.2 ”应 用 缓存 的 基本 使 用 


面 


三 
GR 


应 用 缓存 顾名思义 , 是 为 应 用 (APP) 设计 的 缓存 策略 , 一 般 而 言 针 对 单 页 应 用 (Single 
Page Application) 启用 。 


1. manifest 文件 
在 文档 中 开启 应 用 缓存 非常 简单 ， 只 需要 在 html 标签 中 添加 一 个 manifest 属性 ， 并 指 
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定 manifest 文件 即 可 : 
<!DOCTYPE html» 


<html manifest-"/appcache.manifest"» 


这 个 html 文件 本 身 一 定 会 被 缓存 
«/html» 


appcache.manifest 其 实 就 是 一 个 文本 文件 ， 里 面 指定 了 需要 浏览 器 缓存 的 资源 。 下 面 
看 一 个 简单 的 示例 : 

CACHE MANIFEST 

index.html 

stylesheet.css 

images/logo.png 

scripts/main.js 

浏览 器 首次 加 载 页 面 时 会 读 取 该 文件 ， 并 下 载 和 缓存 它 指定 的 资源 ， 在 本 例 中 将 缓存 
四 个 文件 ， 由 于 缓存 是 一 次 性 的 ， 因 此 如 果 四 个 文件 有 任何 一 个 文件 不 可 用 ， 整 个 缓存 行 
为 都 将 失败 。 对 于 上 面 的 manifest 文件 ， 第 一 行 的 CACHE MANIFEST 是 必 不 可 少 的 ， 紧 
跟 其 后 每 一 行 都 标识 了 一 个 被 缓存 的 文件 路 径 ， 当 然 ， 指 定 了 这 个 manifest 文件 的 HTML 
文件 本 身 是 一 定 会 被 缓存 的 〈 即 在 离线 状态 下 访问 这 个 URL 就 会 读 取 缓存 里 的 HTML 
X. 

要 注意 服务 器 在 返回 此 文件 时 必须 设置 MIME 类 型 为 text/cache-manifest, 不 同 服务 器 
指定 MIME 类 型 的 方式 各 有 不 同 ,在 使 用 基于 Nodejs 的 Web 服务 器 Express 中 设置 MIME 
类 型 的 方式 如 下 : 

res.type('text/cache-manifest') 

res.sendfile (appcache.manifest 文件 的 路 径 ') 


manifest 文件 还 可 以 指定 一 些 特别 的 缓存 行为 ， 下 面 是 一 个 完整 格式 的 示例 : 
CACHE MANIFEST 


+ 指定 会 被 缓存 的 资源 
CACHE: 

/favicon.ico 
images/logo.png 
stylesheets/style.css 
javascripts/app.js 


+ 必须 在 有 网 络 时 才能 访问 的 资源 
NETWORK: 

/api 

http://api.weibo.com 


* 降级 访问 ， 
FALLBACK: 


$ 根 目录 如 果 不 可 用 ， 则 读 取 offline.html 文件 
/ /offline.html 
4 所 有 images/ 目 录 下 的 文件 不 可 用 时 被 请 求 ， 则 读 取 images/offline.jpg 


images/ images/offline.png 


任何 一 个 manifest 文件 都 可 以 包含 CACHE、NETWORK 和 FALLBACK 三 个 不 同 部 
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分 ， 它 们 分 别 表示 如 下 。 

口 CACHE: 和 紧 跟 CACHE MANIFEST 后 的 文件 一 样 ， 一 定 会 被 缓存 ， 浏 览 器 将 会 

在 首次 加 载 页 面 时 便 下 载 其 后 的 所 有 文件 。 

口 NETWORK: 这 些 文件 属于 “ 白 名 单 资源 ”， 无 论 是 否 处 于 离线 状态 ， 这 些 资源 

的 访问 都 会 绕 过 缓存 。 资 源 的 URL 可 以 使 用 通配符 。 

O FALLBACK: 对 于 不 可 访问 时 的 资源 使 用 后 备 资源 进行 访问 ， 两 种 资源 以 空格 隔 
开 ， 第 一 部 分 表示 资源 可 用 时 的 路 径 ， 第 二 部 分 则 是 备用 资源 缓存 路 径 。 资 源 的 
URL 可 以 使 用 通配符 。 

这 三 个 部 分 可 以 按照 任意 顺序 和 数量 进行 组 合 ， 例 如 : 


CACHE MANIFEST 
images/logo.png 


FALLBACK: 
*.html /offline.html 


CACHE: 
/favicon.ico 


FALLBACK: 
images/ images/offline.png 


2. 缓存 更 新 


著名 程序 员 Phil Karlton 曾 说 过 :“ 在 计算 机 科学 领域 ， 有 两 大 难题 ， 如 何 让 缓存 失效 
(cache invalidation) 和 如 何 给 各 种 东西 命名 。” 在 使 用 HTML 5 的 应 用 缓存 时 ,我 们 也 面临 
着 让 缓存 失效 的 难题 。 

-个 简单 的 清单 文件 就 可 以 缓存 我 们 的 程序 ， 但 是 缓存 一 般 来 说 ， 有 如 下 三 个 方式 进 

行 缓存 失效 。 

O 修改 manifest 文件 ， 修改 被 缓存 的 文件 本 身 并 不 会 自动 更 新 缓存 一 一 浏览 嚣 没 那 

么 聪明 。 但 是 更 改 manifest 文件 本 身 则 会 重新 下 载 整个 缓存 列表 。 

口 通过 API 接口 以 编程 方式 进行 缓存 控制 。 

口 用 户主 动 在 浏览 器 中 清除 缓存 数据 。 

我 们 无 法 控制 用 户 行为 ， 因 此 第 三 种 更 新 缓存 的 方式 对 开发 人 员 来 说 没有 什么 意义 ， 
但 是 在 调试 程序 时 这 会 带 给 我 们 很 大 的 便利 。 在 Chrome 中 清除 缓存 的 方式 是 : 菜单 > 工 
具 > 清 除 浏览 数据 > 删除 Cookie， 以 及 其 他 网 站 数据 和 插件 数据 。 接 下 来 着 重 讨论 前 两 种 
缓存 失效 方式 。 

因为 manifest 文件 支持 注释 ， 而 注释 的 更 改 也 可 以 使 manifest 文件 变化 从 而 导致 更 新 
缓 在， 我们 可 以 利用 这 一 特点 来 实现 自动 更 新 缓存 。 使 用 程序 来 生成 一 串 随 机 值 创建 一 行 
注释 写 入 到 manifest 文件 中 ， 这 串 随机 值 可 以 是 版 本 号 、 文 件 哈 希 值 或 时 间 惟 等。 下 面 给 
出 一 个 基于 Nodejs 的 简单 的 版 本 生成 器 : 

var fs = require('fs'), 


mfPath = './public/appcache.manifest', 
mfOutputPath = './public/output.manifest" 


function gernerateVersionHash() { 
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// 使 用 当前 时 间 生 成 一 段 随机 版 本 号 ， 下 面 这 行 语句 最 终 会 生成 类 似 17p7gsbal 这 样 的 值 
return (*new Date()).toString(32) 
} 
fs.readFile (mfPath, function(err, data) { 
if(err) throw err; 
var output = '# version-' + gernerateVersionHash() + '\n' + data 
fs.writeFile(mfOutputPath, output, function (err) ( 
if(err) throw err; 
console.log (' 生 成 文件 成 功 ! 路 径 : '+ mfOutputPath) 
}) 
H 


配置 好 路 径 后 ， 每 次 在 更 新 了 应 用 程序 时 ， 只 需要 运行 这 个 脚本 即 可 更 新 缓 在 。 当 然 
也 可 以 监视 你 要 缓存 的 资源 文件 是 否 被 修改 来 自动 生成 新 版 本 的 manifest 文件 以 实现 更 新 
缓存 一 一 这 样 做 在 开发 时 会 带 来 非常 大 的 便利 。 

3. 编程 接口 


更 新 缓存 更 好 的 方式 是 通过 JavaScript 访问 离线 缓存 接口 。window.applicationCache 对 
象 定 义 了 应 用 缓存 的 编程 接口 ， 比 如 调用 applicationCache.update() 方 法 时 ， 浏 览 器 将 先 重 
新 获取 manifest 文件 ， 如 果 manifest 文件 有 变化 ， 那 么 就 尝试 更 新 用 户 的 缓存 。 不 过 此 时 
只 是 将 需要 缓存 的 文件 下 载 下 来 ， 当 下 载 完毕 后 ， 调 用 applicationCache.swapCache() 即 可 
将 原 缓存 换 成 新 缓存 。 不 过 什么 时 候 才 是 “下 载 完 毕 ” 状 态 呢 ? 这 可 以 通过 
applicationCache.status 属性 查询 缓存 的 当前 状态 来 实现 : 


function getAppCacheStatus() { 
var appCache - window.applicationCache; 
//status 是 一 个 整数 ，appCache 上 定义 了 一 系列 常量 表示 缓存 的 状态 
switch (appCache.status) ( 
//UNCACHED === 0， 未 缓存 状态 ， 表 示 应 用 缓存 对 象 还 没有 初始 化 完成 
case appCache.UNCACHED: 
return 'UNCACHED'; 
break; 
//IDLE === 1， 空 闲 状 态 ， 应 用 缓存 此 时 未 处 于 更 新 过 程 中 
case appCache.IDLE: 
return 'IDLE'; 
break; 
//CHECKING --- 2， 检 查 状 态 ， 清 单 已 经 获取 完毕 并 检查 更 新 
case appCache.CHECKING: 
return 'CHECKING'; 
break; 
//DOWNLOADING === 3， 下 载 资源 并 准备 加 入 到 缓存 中 ， 这 是 由 于 清单 文件 变化 引起 的 
case appCache.DOWNLOADING: 
return 'DOWNLOADING'; 
break; 
//UPDATEREADY === 4， 更 新 就 绪 状态 ， 一 个 新 版 本 的 应 用 缓存 可 以 使 用 一 此 时 可 以 调用 
swapCache () 方法 
// 该 状态 有 一 个 对 应 的 事件 updateready， 当 下 载 完 毕 一 个 更 新 ， 并 且 还 未 使 用 
swapCache() 方法 激活 更 新 时 ， 该 事件 触发 ， 而 不 会 是 cached 事件 
case appCache .UPDATEREADY: 
return 'UPDATEREADY'; 
break; 
//OBSOLETE === 5， 废 弃 状 态 ， 应 用 缓存 现在 被 废弃 
case appCache.OBSOLETE: 
return 'OBSOLETE'; 
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break; 
default: 
return 'UKNOWN CACHE STATUS'; 
break; 
5 
) 


一 般 情况 下 ， 这 些 状 态 是 不 需要 程序 去 主动 查询 的 ， 因 为 浏览 器 会 对 下 载 进度 、 应 用 
缓存 更 新 和 错误 状态 变更 等 情况 触发 一 系列 的 事件 , 你 可 以 使 用 applicationCache 对 象 监听 
updateready 事件 来 确定 什么 时 候 调用 update 和 swapCache 方法 : 

//1oad 事件 后 再 进行 监听 


window.addEventListener('load', function(e) { 


window.applicationCache.addEventListener('updateready', function(e) { 
if (getAppCacheStatus() === 'UPDATEREADY') ( 
// 此 时 浏览 器 已 经 下 载 好 了 需要 被 缓存 的 文件 
// 调 用 swapCache () 方 法 以 填充 
window.applicationCache.swapCache(); 
// 在 重新 加 载 页 面 之 前 ， 最 好 提示 用 户 
if (confirm(" 本 程序 有 更 新 ， 是 否 刷新 ? ") ) { 
window.location.reload(); 
) 
) else ( 
/ [tlt mani fest 文件 无 更 新 
) 
), false); 
), false); 


如 你 所 料 ， 除 了 updateready 还 有 其 他 一 系列 的 事件 会 触发 : 


function handleCacheEvent(e) { 
EE 
) 


function handleCacheError(e) { 
alert('Error: Cache failed to update!"'); 
}; 


//manifest 第 一 次 加 载 缓存 时 会 触发 


appCache.addEventListener('cached', handleCacheEvent, false); 


// 正 在 检查 更 新 ， 这 个 事件 永远 是 第 一 个 触发 的 


appCache.addEventListener('checking', handleCacheEvent, false); 


// 有 更 新 ， 浏 览 器 正在 下 载 资源 文件 


appCache.addEventListener('downloading', handleCacheEvent, false); 


// 当 这 些 情况 出 现时 会 触发 error 事件 : 

//1. manifest 文件 返回 404 或 者 410 状态 时 

//2. 下 载 资源 失败 时 

//3. 正在 下 载 资源 文件 时 却 发 现 manifest 文件 更 新 了 时 


appCache.addEventListener('error', handleCacheError, false); 


// 第 一 次 下 载 manifest 文件 之 后 触发 
appCache.addEventListener('noupdate', handleCacheEvent, false); 


/[manifest 文件 返回 404 或 者 410 状态 ， 此 时 缓存 将 会 被 删除 
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appCache.addEventListener('obsolete', handleCacheEvent, false); 


// 每 一 个 资源 文件 在 获取 时 都 会 触发 一 次 progress 事件 


appCache.addEventListener('progress', handleCacheEvent, false); 


// 最 近 一 次 manifest 资源 被 重新 下 载 时 触发 
appCache.addEventListener('updateready', handleCacheEvent, false); 


Application cache 的 使 用 不 算 困难 ， 但 是 在 使 用 时 一 定 要 注意 下 面 一 些 可 能 会 磁 到 的 


口 访问 页 面 时 查询 参数 将 会 不 起 作用 。 如 访问 index.html?page=1 这 个 url， 第 一 次 加 
载 时 后 端 服务 器 可 以 取 到 page=1 这 个 参数 ， 可 是 当 index.html 被 缓存 后 ， 无 论 如 
何 调整 查询 参数 都 是 不 会 向 服务 器 发 起 请 求 的 ， 因 此 要 注意 这 一 点 。 如 果 需 要 在 
url 中 传递 参数 ， 可 以 使 用 hash， 并 用 JavaScript 处 理 hash 内 容 。 

O manifest 本 身 也 有 可 能 被 缓存 ， 设 置 过 期 header 是 个 解决 此 问题 的 方法 。 


5. IR 


对 于 希望 一 键 将 网 页 转换 为 缓存 版 本 的 用 户 们 来 说 ， 你 们 有 福 了 。 confessjs 
(https://github.com/jamesgpearce/confess) 是 一 个 基于 PhantomJs (http://phantomjs.org/) 的 
manifest 文件 生成 工具 。 利用 它 可 以 生成 任意 网 站 manifest 文件 , 使 用 方法 也 非常 简单 ( 假 
设 你 已 经 安装 了 PhantomJs ): 


$ phantomjs confess.js http://baidu.com appcache 


最 终 会 生成 类 似 这 样 的 manifest 文件 : 


CACHE MANIFEST 
# Time: Mon Apr 29 2013 03:47:34 GMT+0000 (UTC) 


CACHE: 

http://sl.bdstatic.com/r/www/img/i-1.0.0.png 
http://sl.bdstatic.com/r/www/cache/global/js/home-2.10.js 
http://sl.bdstatic.com/r/www/cache/global/js/tangram-1.3.4c1.0.js 
http://s1.bdstatic.com/r/www/cache/user/js/u-1.3.7.js 
http://www.baidu.com/img/shouye b5486898c692066bd2cbaeda86d74448.gif 
http://www.baidu.com/cache/global/img/gs.gif 
http://suggestion.baidu.com/su?wd-&cb-window.bdsug.sugPreRequest&sid-22 
19 2358 1420 1944 1788 2250&t-1367207251679 


NETWORK: 


如 果 你 还 嫌 安 装 PhantomJs 和 下 载 confessjs 麻烦 的 话 ， 那 么 还 有 一 个 在 线 工 具 
Chttp://appcache.rawkes.com/) 可 以 即时 生成 manifest 文件 ， 你 需要 做 的 仅仅 是 敲 入 你 的 目 
标 url， 如 图 4.5 所 示 。 

QE: 离线 缓存 在 各 大 浏览 器 里 面 支持 都 很 好 (JE 10 以 下 不 支持 ) ， 加 之 即便 在 不 支 


持 的 浏览 器 中 使 用 manifest 文件 也 不 会 有 影响 ， 只 是 在 编程 使 用 时 记得 检测 
window.applicationCache 是 否 存 在 就 行 
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Type in a URL, press enter, done. 


baidu.com 


Generated manifest 
CACHE MANIFEST 
# Time: Mon Apr 29 2013 03:47:34 GMT«0000 (UTC) 


CACHE: 
http://si.bdstatic.com/r/www/img/i-1.0.0.png 


图 4.5 在 线 appcache 生成 工具 


44 拖 放 


自 鼠 标 被 发 明 以 来 ， 拖 放 操作 在 计算 机 的 世界 里 无 处 不 在 一 一 操作 系统 中 拖 放 文件 和 
调整 窗口 位 置 ， 游 戏 中 框 选 或 放置 单位 ， 图 片 处 理 中 移动 和 调整 图 层 一 一 几乎 和 “移动 ” 
相关 的 操作 ， 都 离 不 开 拖 放 。 即 便 是 如 此 流行 的 操作 ， 但 过 去 很 长 一 段 时 间 里 ， 在 Web tH 
界 只 能 通过 模拟 方式 来 实现 拖 放 操作 。 

而 HTML 5 千 呼 万 唤 始 出 来 的 原生 拖 放 在 很 大 程度 上 简化 了 开发 拖 放 交 互 的 难度 。 不 
过 在 知道 HTML 5 原生 拖 放 的 好 之 前 ， 有 必要 看 看 模拟 拖 放 的 坏 。 


4.4.1 模拟 拖 放 


在 没有 拖 放 API 的 情况 下 ， 实 现 拖 放 的 思路 其 实 也 不 算 太 难 。 首 先 通过 监听 document 
的 mousedown 事件 ， 如 果 有 mousedown (没有 mouseup) 则 说 明 当前 进入 待 拖 电 的 状态 ， 
通过 事件 对 象 的 target 的 属性 可 以 确定 当前 是 哪 一 个 元 素 将 被 拖 动 , 此 时 再 监听 mousemove 
事件 ， 随 着 鼠标 的 移动 ， 动 态 更 改 被 拖 电 元 素 的 位 置 ， 等 mouseup 事件 触发 时 ， 再 释放 拖 
RIRA: 


<div id="myDiv1" class="draggable" 
style-"background:red;width:100px;height:100px;position:absolute"»«/div 
> 

<div id="myDiv2" class="draggable" 
style="background:blue;width:100px;height:100px;position:absolute; left: 
100px"></div> 

<script type="text/javascript"> 

var DragDrop = function() { 


var dragging = null // 利 用 dragging 保存 正在 被 拖 动 的 元 素 


function handleEvent (event) ( 
var target = event.target 


LEUUUL 
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switch (event.type) ( 
case "mousedown": 
// 页 面 所 有 带 有 draggable class 的 元 素 都 可 以 被 拖 动 
if (target.className.indexOf ("draggable") > -1) ( 
dragging - target 


break 
case "mousemove": 

if (dragging !== null) { 
// 事 件 对象 的 clienx 和 clienty 表示 鼠标 指针 相对 于 浏览 器 页 面 的 坐标 
dragging.style.left = event.clientX + "px" 
dragging.style.top = event.clientY + "px" 

) 

break 


case "mouseup": 
// 释 放 拖 放 状 态 
dragging = null 
break 
} 
) 


// 公 开 的 接口 ， 启 用 /禁用 拖 动 只 需要 调用 一 个 方法 
return ( 
enable: function() ( 
document.addEventListener("mousedown", handleEvent) 
document.addEventListener("mousemove", handleEvent) 
document.addEventListener("mouseup", handleEvent) 


) 


disable: function() ( 
document.addEventListener("mousedown", handleEvent) 
document.addEventListener("mousemove", handleEvent) 
document.addEventListener("mouseup", handleEvent) 
} 
) 
)O 
DragDrop.enable() 


</script> 
此 时 两 个 div 已 经 可 以 拖 动 起 来 了 , 不 过 这 个 DragDrop 对 象 并 不 是 特别 完善 , 还 有 许 
多 细节 问题 没有 处 理 。 


比如 每 次 拖 动 ， 元 素 左 上 角 都 会 “跳动 ”到 鼠标 的 指针 处 ， 在 拖 动 开始 前 应 该 计算 鼠 
标 相 对 于 元 素 的 偏 移 量 x 和 y， 在 更 新 元 素 位 置 时 ， 应 该 减 去 偏 移 量 : 
var diffX = 0, diffY = 0 


/ [mousedown 事件 时 计算 出 偏 移 量 


case "mousedown": 
if (target.className.indexOf ("draggable") > -1)1{ 
dragging - target 
/ /target 的 offsetLeft 和 offsetTop 是 元 素 的 左边 界 到 它 的 包含 块 (本 例 中 是 页 面 ) 的 
左边 界 的 偏 移 量 
diffX event.clientX - target.offsetLeft 
diffY = event.clientY - target.offsetTop 


/ /mousemove 事件 时 减 去 偏 移 量 


sas 
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case "mousemove": 


if (dragging !-- null)( 
dragging.style.left = (event.clientX - diffX) + "px" 
dragging.style.top = (event.clientY - diffY) + "px" 


再 比如 , 拖 忠 时 依赖 了 document 作为 其 包含 块 , 在 比较 复杂 的 页 面 中 ,应 该 首先 将 元 
素 挪动 到 body 下 ， 再 进行 拖 动 ; 


case "mousemove": 
if (dragging !-- null) ( 
document.appendChild (dragging) 


js 
如 果 不 希望 拖 忠 时 影响 拖 忠 前 的 布局 ， 还 应 该 生成 一 个 占 位 元 素 : 


case "mousemove" 
if (dragging !-- null) ( 
if (dragging.parentNode) ( 


var clone = dragging.cloneNode|() 
dragging.parentNode.insertBefore (clone, dragging) 


document .appendChild (dragging) 
) 


xs 
如 果 你 使 用 了 自 定 义 事件 ， 理 想 状 况 下 应 该 为 元 素 触发 自 定 义 的 拖 放 事件 : 


//dndEventTarget 是 一 个 事件 目标 对 象 ， 该 类 对 象 拥有 注册 和 发 布 事件 的 能 力 
var dndEventTarget = new EventTarget () 


switch (event.type) ( 
case "mousedown": 


// 页 面 所 有 带 有 draggable class 的 元 素 都 可 以 被 拖 动 
if (target.className.indexOf ("draggable") > -1) ( 

dragging - target 
) 
//dndEventTarget 是 一 个 事件 目标 对 象 ，DragDrop 对 象 最 终 将 会 是 该 对 象 本 身 
dndEventTarget.fire((type:"dragstart", target: dragging]) 
break 


case "mousemove": 


if (dragging !-- null) ( 
dragging.style.left = event.clientX + "px" 


dragging.style.top = event.clientY + "px" 


dndEventTarget.fire((type:"drag", target: dragging])) 


$ 


break 


case "mouseup": 
dragging = null 
dndEventTarget.fire((type:"dragend", target: dragging}) 


break 
) 


/ /DragDrop 对 象 最 终 将 会 是 该 对 象 本 身 
return dndEventTarget 


外 部 或 者 DragDrop 自己 应 该 是 都 可 以 监听 DragDrop 对 象 的 相应 事件 。 


vs 
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DragDrop.enable () 


DragDrop.addEventListener("dragstart", function (event) { 
console.log("Started dragging " + event.target.id) 
}) 


DragDrop.addEventListener ("drag", function (event) { 
console.log ("dragged " + event.target.id) 


) 


DragDrop.addEventListener ("dragend", function (event) { 
console.log("drag end !") 


) 


拖 放 拖 放 ， 有 拖 电 操作 ， 自 然 少不了 放置 操作 。 前 面 的 例子 中 放置 操作 是 随意 的 一 一 
拖 哪 儿 就 放 哪 儿 , 理想 情况 下 被 拖 电 的 对 象 应 该 是 只 能 放置 到 属于 自己 或 者 公用 的 目标 上 ， 
如 果 放 置 失败 ， 则 将 元 素 放 回 原 处 。 下 面 给 出 一 个 基于 jQuery 实现 的 drag&drop 示例 : 


<script src="../jquery.js"></script> 
<div id="myDivl" class="draggable" style-"background:red;width:100px; 
height:100px;float:left;"»«/div^ 
<div id-"myDiv2" class-"dropzone" style-"background:gray;width:200px; 
height:200px;margin-left:200px;"»«/div» 
<script type-"text/javascript"» 
var DragDrop = function() { 
var $dragging - null 
var $zone = $('.dropzone') 
// 检 测 当前 鼠标 是 否 在 dropzone 区 域 
function inDropzone (mouseEvent) ( 
return ($zone.offset().top < mouseEvent.clientY && 
mouseEvent.clientY < S$zone.height() + $zone.offset().top) && 
($zone.offset().left « mouseEvent.clientX && 
mouseEvent.clientX < S$zone.width() + $zone.offset().left) 
) 
function handleEvent (event) ( 
var target - event.target 


switch (event.type) ( 
case "mousedown": 
if ($(target).hasClass("draggable")) ( 
$dragging = $(target) 
$dragging.css('position', 'absolute') 
j; 
break 
case "mousemove": 
if ($dragging !== null) { 


$dragging.css({ 
'left': event.clientX + "px", 
'top': event.clientY + "px" 
}) 
) 
break 


case "mouseup": 
if (inDropzone(event)) { 
$zone.append ($dragging) 
) 


a 
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$dragging.css('position', 'static') 
$dragging - null 
break 
} 
} 


// 公 开 的 接口 ， 启 用 /禁用 拖 动 只 需要 调用 一 个 方法 
return { 
enable: function() { 
$ (document) .on ("mousedown mousemove mouseup", handleEvent) 
) 
disable: function() ( 
$ (document) .off ("mousedown mousemove mouseup", handleEvent) 
} 
) 
10 
DragDrop.enable() 
</script> 


上 面 的 例子 是 非常 残废 的 一 种 拖 放 实现 ， 只 是 用 来 说 明 模 拟 拖 放 的 原理 ， 要 在 生产 环 
境 使 用 拖 放 还 得 考虑 非常 多 的 细节 问题 。 幸 运 的 是 几乎 所 有 的 JavaScript UI 框架 都 包含 
相应 的 拖 放 解 决 方案 ， 读 者 可 以 按 需 选用 而 非 重 造 轮子 : 

口 jQueryUI 中 包含 有 Draggable 和 Droppable 组 件 , 从 其 中 派生 的 还 有 Sortable 组 件 。 

O Dojo, YUI 和 ExtJs 这 些 老 牌 框架 也 有 自己 的 Dnd 实现 ， 使 用 方式 大 同 小 异 。 

O Closure Library 中 也 包含 一 套 Dnd 实现 ， 它 的 特点 是 抽象 程度 高 ， 具 有 普 适 性 。 

虽然 现今 在 Web 上 模拟 拖 放 已 经 是 一 种 非常 成 熟 的 技术 , 但 模拟 拖 放 仍 然 有 这 样 一 些 


无 法 规避 的 缺陷 : 
O 只 能 拖 页 面 内 的 元 素 ， 无 法 与 浏览 器 外 部 环境 进行 交互 一 一 比如 拖 忠 文件 到 浏览 
器 窗口 。 


O 元 素 在 被 拖 忠 时 ， 会 触发 大 量 的 mousemove 事件 ， 从 而 产生 大 量 的 重 绘 操作 ， 时 
刻 要 注意 性 能 问题 ， 别 忘 了 采用 throttle 模式 来 减少 重 绘 。 

O 编码 复杂 ， 常 规 任 务 也 需要 引入 大 量 的 库 代 码 。 

要 克服 这 些 缺 陷 ， 就 要 请 出 我 们 的 HTML 5 原生 拖 放 了 。 


44.2 原生 拖 放 


说 来 有 趣 的 是 ， 在 Web 中 原生 拖 放 的 先驱 者 其 实 是 备 受 诉 病 的 正 浏览 器 。 早 在 正 5 
时 ， 拖 放 的 API 就 已 经 基本 成 型 ， 待 HTML 5 将 拖 放 写 入 标准 之 时 ， 其 API 变化 也 非常 
的 小 。 

而 说 拖 放 功能 兼容 性 ， 其 实 所 有 浏览 器 都 支持 一 页面 上 的 链接 和 图 片 等 元 素 从 最 开 
始 默认 就 是 可 以 拖 抱 的 ， 比 如 拖 动 图 片 ， 如 图 4.6 所 示 。 

默认 情况 下 ， 像 图 片 和 文字 这 样 的 元 素 可 以 拖 放 到 浏览 器 地 址 栏 、 输 入 框 和 桌面 甚至 
其 他 程序 中 。HTML 5 所 做 的 只 是 将 拖 放 操作 扩展 到 了 所 有 元 素 上 罢了 。 

拖 放 是 HIML 5 标准 中 非常 重要 的 部 分 ， 它 规定 了 基于 事件 机 制 的 API 和 标签 属性 
(draggable)， 应 用 拖 放 的 第 一 步 ， 是 检测 浏览 器 是 否 支持 拖 放 功能 : 


.174 


第 4 章 从 网 页 (Web page) 到 应 用 (Application) 


图 4.6 dim oni EET 


var div = createElement ('div'); 
var supportDnd = ('draggable' in div) || ('ondragstart' in div && 'ondrop' 
in div); 


如 果 你 使 用 Modernizr 这 样 的 特性 检测 库 , 则 只 需要 访问 Modernizr.draganddrop 属性 : 


if (Modernizr.draganddrop) { 
// 浏 览 器 支持 HTML 5 拖 放 
) else { 


// 使 用 UI 库 来 实现 拖 放 吧 


早 在 第 2 章 时 我 们 就 说 过 ， 为 元 素 添加 上 draggable=true 属性 ， 就 可 以 为 元 素 启用 拖 
忠 功 能 一 一 图 片 、 链 接 、 文 件 或 其 他 任何 DOM 元 素 都 可 以 : 
<div draggable=true> 拖 我 ! </div> 


当然 ， 也 可 以 禁用 默认 可 拖 忠 元 素 的 拖 忠 行为 : 


<img draggable=false src="test.png" /> 


启用 拖 忠 元 素 在 被 拖 忠 时 和 图 片 被 拖 忠 时 一 样 ， 浏 览 器 会 为 它 创 建 一 个 半 透 明 的 重 
影 ， 比 如 这 个 例子 : 


<div class="box" draggable="true"><header>A</header></div> 
<div class="box" draggable="true"><header>B</header></div> 
<div class="box" draggable="true"><header>C</header></div> 


我 们 加 上 一 些 样式 : 


<style> 

[draggable] { 
/* 防止 可 拖 点 元 素 的 文字 被 选中 */ 
-webkit-user-select: none; 
user-select: none; 
/* 可 以 拖 忠 的 元 素 通常 鼠标 是 十 字形 */ 
cursor: move; 

$ 

-box { 
height: 150px; 
width: 150px; 
float: left; 
border: 2px solid #666666; 
background-color: 4ccc; 


sys 
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margin-right: 5px; 
border-radius: 10px; 
text-align: center; 

H 

-box header { 
color: #fff; 
text-shadow: $000 0 1px; 
box-shadow: 5px; 
padding: 5px; 
background: #999; 
border-bottom: 1px solid #ddd; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 


} 
</style> 


最 后 得 到 的 效果 可 能 如 图 4.7 所 示 。 


图 4.7 


半 透 明 重 影 


这 种 行为 在 拖 奥 中 很 常见 ， 如 果 你 想 使 用 模拟 的 方式 创建 这 个 半 透 明 重 影 ， 需 要 耗费 
很 大 的 功夫 : 克隆 节点 、 克 隆 事件 和 加 透明 度 等 等 一 一 想 想 都 觉得 头皮 发 麻 ， 而 HTML 5 


里 面 只 需要 一 个 属性 就 可 以 搞定 。 


光 拖 动 元 素 是 没有 什么 实际 意义 的 ， 更 重要 的 是 被 拖 动 的 元 素 要 与 其 他 元 素 交 互 才 会 
产生 价值 。 拖 放 事 件 是 拖 放 过 程 中 非常 重要 的 部 分 ， 通 过 监听 这 些 事件 可 以 编程 控制 拖 放 
的 整个 流程 。 先 来 看 看 拖 放 流程 中 都 有 哪些 事件 。 


(1) dragstart: 当 一 个 元 素 开始 被 拖 忠 的 


时 候 触发 。 用 户 拖 忠 的 元 素 需 要 附加 dragstart 


事件 。 在 这 个 事件 中 的 事件 处 理 程序 中 ， 你 可 以 设置 与 这 次 拖 忠 相关 的 信息 。 
比如 ， 你 可 以 在 拖 忠 开始 时 将 被 拖 忠 元 素 设置 为 半 透 明 ， 好 让 用 户 清楚 地 知道 哪个 元 


素 正 在 被 拖 动 : 
function handleDragStart(e) { 


this.style.opacity = '0.5' //thi 
D 


s 或 者 e.target 是 源 节点 (source node) 


var boxes = document .querySelectorAll ('#columns .box'); 


[] .forEach.call (boxes, 
box.addEventListener('dragstart' 


i) 


function(box) { 


, handleDragStart, false) 


你 也 可 以 通过 dataTransfer 对 象 为 这 次 拖 忠 设置 附加 的 额外 的 数据 : 


function handleDragStart(e) { 
e.dataTransfer.setData('text/pla 
} 


ye 


in', 'Drag Me...') 
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件 ， 


在 完成 拖 放 后 ， 自 然 要 把 透明 度 给 改 回来 ， 这 需要 用 到 我 们 待 会 儿 要 讲 的 dragend 事 
在 这 之 前 我 们 先 看 看 在 拖 动 过 程 中 会 触发 哪些 事件 。 
(2) dragenter: 当 处 于 拖 奥 状态 中 的 鼠标 第 一 次 进入 某 个 元 素 〈 非 被 拖 抱 的 元 素 ) 的 


时 候 触发 。 这 个 事件 的 监听 器 需要 指明 是 否 允 许 在 这 个 区 域 释放 鼠标 。 如 果 没 有 设置 监听 


器 ， 


或 者 监听 器 没有 进行 操作 ， 则 默认 不 允许 释放 《〈 即 不 能 drop)。 当 你 想 要 通过 类 似 高 


亮 或 插入 标记 等 方式 来 告知 用 户 该 元 素 上 可 以 释放 ， 你 需要 在 该 元 素 上 监听 这 个 事件 。 


(3) dragover: 当 拖 忠 中 的 鼠标 移动 经 过 一 个 元 素 的 时 候 触 发 。 大 多 数 时 候 ， 监 听 过 


程 发 生 的 操作 与 dragenter 事件 是 一 样 的 ， 只 不 过 dragenter 只 在 鼠标 进入 元 素 时 触发 一 次 ， 
而 dragover 会 持续 触发 (和 mousemove 类 似 )。 


nn 


处 了 


(4) dragleave: 当 拖 忠 中 的 鼠标 离开 某 元 素 时 触发 。 这 时 你 可 以 在 监听 器 里 将 “可 放 
的 高 亮 反馈 去 除 。 
对 于 前 面 的 例子 ， 可 以 通过 监听 上 面 三 个 事件 来 优化 用 户 体验 : 


function handleDragStart(e) ( 
this.style.opacity = '0.4'; 
) 


function handleDragOver(e) ( 
if (e.preventDefault) ( 
// 必 须要 阻止 dragover 的 默认 行为 〈 即 不 可 drop) ， 这 样 才能 进行 drop 操作 


e.preventDefault(); 


) 
// 改 变 drop 的 效果 ， 后 文 详解 


e.dataTransfer.dropEffect = 'move'; 


return false; 


) 


function handleDragEnter(e) { 
// 为 鼠标 所 在 当前 元 素 加 上 表示 hover 状态 的 class 
this.classList.add('over'); 


i 


function handleDragLeave(e) ( 

//this / e.target 此 时 是 前 一 个 target 元 素 (鼠标 离开 这 个 元 素 后 必然 会 进入 另 一 个 元 
素 ， 此 时 另 一 个 的 dragenter 将 被 触发 ) 

// 鼠 标 离开 元 素 时 去 除 hover 状态 的 class 

this.classList.remove('over'); 


} 


var boxes = document .querySelectorAll('#columns .box'); 

[] .forEach.call (boxes, function (box) ( 
box.addEventListener('dragstart', handleDragStart, false); 
box.addEventListener('dragenter', handleDragEnter, false); 
box.addEventListener('dragover', handleDragOver, false); 
box.addEventListener('dragleave', handleDragLeave, false); 

DE 


在 这 个 例子 中 有 几 点 要 值得 我 们 注意 : 
每 一 个 事件 监听 器 里 的 this/e.target 各 不 相同 , 具体 指向 什么 内 容 取决 于 事件 触发 状态 
F DoD 事件 模型 哪个 位 置 一 一 通常 来 说 你 的 直觉 在 猜测 目标 元 素 上 都 是 很 准 的 。 比 如 


dragover 时 的 this 自然 应 该 指向 鼠标 所 hover 的 元 素 。 


says 
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再 次 强调 ，dragover 会 不 断 触发 ， 这 也 是 我 们 将 操作 hover 状态 变更 的 代码 写 到 
dragenter 事件 监听 器 中 的 原因 。 基 于 这 个 原因 ，dragover 在 使 用 时 一 定 要 小 心 ， 注 意 不 要 
在 监听 器 里 做 太 多 计算 或 者 泻 染 工作 。 

当 在 拖 电 元 素 时 ， 被 拖 电 的 元 素 自 己 也 会 触发 一 系列 的 事件 。 

CD drag: 这 个 事件 在 拖 忠 源 上 触发 。 即 在 拖 忠 操作 中 触发 dragstart 事件 的 元 素 。 该 
事件 表示 该 元 素 正在 被 拖 动 ， 和 dragover 类 似 ， 这 个 事件 也 会 持续 不 断 地 触发 。 

(2) drop: 这 个 事件 在 拖 抱 操作 结束 释放 时 ， 在 释放 元 素 上 触发 。 监 听 器 用 来 响应 接 
收 被 拖 蝶 的 数据 并 插入 到 释放 之 处 。 这 个 事件 只 有 在 需要 时 才 触 发 。 当 用 户 强行 取消 了 拖 
电 操 作 时 本 事件 将 不 被 触发 ， 例 如 按 下 了 Escape (ESC) 按键 ， 或 鼠标 在 非 可 释放 目标 上 
释放 了 按键 。 

(3) dragend: 不 管 拖 忠 操 作成 功 与 否 ， 拖 忠 源 在 拖 忠 操作 结束 后 都 将 触发 dragend 
事件 。 


function handleDrag(e) ( 
console.log('drag', this) 

} 

function handleDrop(e) { 


//this / e.target 此 时 是 成 为 放置 目标 的 元 素 


if (e.stopPropagation) ( 
/ drop 事件 是 会 往 父 元 素 冒 泡 的 ， 通 常 我 们 不 需要 父 元 素 监听 到 此 事件 ， 因 此 阻止 它 冒 泡 上 去 
e.stopPropagation(); 

) 

console.log(this) 

return false; 


} 


function handleDragEnd(e) { 
//this/e.target 是 被 拖 电 的 元 素 
console.log(this); 
[].forEach.call(boxes, function (box) ( 
box.classList.remove('over'); 
DE 
k 


var boxes = document.querySelectorAll('£columns .box'); 

[] .forEach.call (boxes, function (box) ( 
box.addEventListener ('dragstart', handleDragStart, false); 
box.addEventListener ('dragenter', handleDragEnter, false); 
box.addEventListener('dragover', handleDragOver, false); 
box.addEventListener('dragleave', handleDragLeave, false); 
box.addEventListener('drag', handleDrag, false); 
box.addEventListener('drop', handleDrop, false); 
box.addEventListener('dragend', handleDragEnd, false); 

EE 


对 于 链接 图 片 等 元 素 而 言 ， 拖 动 可 能 会 在 当前 标签 打开 这 个 链接 或 者 重 定向 
drop 事件 中 调用 e.stopPropagation 能 有 效 防 止 因 事件 冒 泡 导致 的 奇怪 行为 。 

到 目前 为 止 ,我 们 的 拖 动 和 放置 元 素 都 已 经 有 了 拖 忠 时 高 亮 , 但 是 在 放置 时 还 没有 产 
生 任 何 实际 的 行为 。 接 下 来 要 介绍 的 DataTransfer 对 象 将 为 拖 电 操 作 赋予 灵魂 。 

DataTransfer 对 象 通常 是 挂 载 在 drag 系列 事件 的 事件 对 象 上 的 一 个 属性 ， 前 面 我 们 已 


在 
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经 抛 出 过 一 个 小 例子 ， 在 dragstart 事件 中 通过 setData 方法 可 以 为 本 次 拖 电 设 置 数据 : 


function handleDragStart(e) { 
this.style.opacity = '0.4'; 
//setData 第 一 个 参数 表示 设置 数据 的 MIME 类 型 ， 第 二 个 是 具体 Data 值 (只 能 是 字符 串 ) 
e.dataTransfer.setData('text/html', this.innerHTMI); 
5 
有 setData 自然 少不了 getData.. TE drop 事件 发 生 时 ， 你 可 以 通过 getData 获取 到 之 前 
设置 的 数据 : 
function handleDrop(e) ( 
if (e.stopPropagation) ( 
e.stopPropagation(); 
H 
// 此 时 你 可 以 做 
console.log(e.dataTransfer.getData('text/html')); 
return false; 


$ 


除了 读 写 数据 ，dataTransfer 对 象 还 可 以 在 拖 动 过 程 中 为 用 户 提供 可 视 化 反馈 。 
dataTransfer 的 effectAllowed 属性 用 于 初始 化 dragenter 和 dragover 事件 中 的 允许 的 鼠标 效 
W (dropEffect)， 可 以 设置 的 值 有 none、copy、copyLink、copyMove、link、linkMove、 
move, all 和 uninitialized。 通 常 你 不 用 设置 该 属性 ， 或 者 直接 设置 为 al (允许 所 有 类 型 的 
鼠标 效果 )， 因 为 真正 决定 鼠标 形状 的 应 该 是 dataTransfer.dropEffect 属性 : 

function handleDragStart(e) { 


e.dataTransfer.effectAllowed - 'all'; 


} 

function handleDragOver (e) { 
e.dataTransfer.dropEffect = "link" 
return false; 
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dropEffect 只 有 四 个 取 值 类 型 ， 分 别 是 copy. move. link fill none. 7E MAC OS 上 link 
的 最 终 效 果 如 图 4.8 所 示 。 


图 4.8 鼠标 的 dropEffect 


saos 


第 1 篇 HTML 5 移动 Web 开发 基础 


除了 悬 停 可 放置 区 域 的 鼠标 样式 ， 甚 至 还 可 以 通过 setDragImage 方法 设置 拖 忠 时 跟随 
鼠标 显示 的 图 片 : 


function handleDragStart(e) { 


e.dataTransfer.effectAllowed - 'all'; 
var dragIcon = document.createElement ('img'); 
dragIcon.src = 'http://www.w3.org/html/logo/img/mark-word-icon.png'; 
dragIcon.width = 100; 
dragIcon.height - 100; 
// 后 两 个 参数 表示 图 片 相 对 于 鼠标 的 偏 移 量 
e.dataTransfer.setDragImage (dragIcon, -10, -10); 
F 


效果 如 图 4.9 所 示 。 


图 4.9 效果 图 


除了 上 文 提 到 的 以 外 ，dataTransfer 还 有 这 样 一 些 属性 或 者 方法 (标准 的 )。 
O file: 包含 拖 忠 的 一 个 或 多 个 文件 ， 如 果 没 有 拖 蝶 文 件 则 该 属性 为 空 列表 。 
O types: 按 顺 序 存储 这 拖 电 数据 的 类 型 。 
口 clearData(type): 清除 给 定 类 型 的 数据 ， 如 果 没 有 提供 type 参数 ， 所 有 类 型 的 数据 
都 将 被 清除 。 
O items: 一 个 DataTransferItemList 类 型 的 对 象 一 一 这 是 dnd 较 新 版 本 提出 的 接口 ， 
目前 已 被 Chrome 支持 。 该 接口 包含 了 拖 蝶 的 数据 (包含 文件 ) ， 并 且 可 以 对 它们 
进行 一 些 操作 〈 如 利用 getAsString 方法 把 数据 转换 为 字符 串 〉。 

原生 拖 放 最 大 的 优点 可 能 就 在 于 能 通过 拖 蝶 操 作 与 桌面 文件 进行 交互 了 ， 在 元 素 的 
drop 事件 里 面 可 以 访问 dataTransferfiles 属性 获取 文件 信息 : 


function handleDrop (e) { 
e.stopPropagation() 
e.preventDefault () 


* 180* 


第 4 章 从 网 页 (Web page) 到 应 用 (Application) 


var files = e.dataTransfer.files 

for (var i = 0, f; f = files[i]; i++) ( 
// 此 处 进行 文件 操作 

} 


QFE: 在 接 下 来 的 章节 我 们 将 详细 讲解 如 何在 拖 旬 时 进行 文件 内 容 读 取 等 操作 。 


既然 可 以 从 桌面 拖 蝶 文件 到 浏览 器 ， 那 么 从 浏览 器 拖 忠 文件 到 桌面 自然 也 是 可 以 的 。 
Gmail 在 邮件 里 实现 拖 忠 下 载 的 功能 时 的 确 是 惊艳 一 方 ， 下 面 我 们 自己 来 实现 一 个 拖 忠 链 
接 到 桌面 以 下 载 文件 的 功能 。 

在 MAC OS 下 ， 拖 忠 链接 到 桌面 默认 会 自动 生成 一 个 苹果 的 plist 文件 (XML 格式 )， 
打开 这 个 文件 会 调用 默认 浏览 器 跳 转 到 链接 所 在 页 面 。 如 果 要 想 更 改 拖 忠 链 接 时 的 默认 行 
为 ,关键 点 在 于 调用 dataTransfersetData 设置 DownloadURL 的 值 为 操作 系统 可 识别 的 格式 ， 
并 提供 正确 的 下 载 地址 : 

Xa href="#" id=" filelink " draggable-"true" data-downloadurl-" 

application/octet-stream 
:SavedFileName.png 
:https://www.google.com.hk/images/srpr/logo4w.png"»drag me to download 

«/a» 

可 以 看 到 downloadurl 由 冒号 分 割 的 三 部 分 组 成 ， 第 一 部 分 是 文件 的 MIME Type， 第 
二 部 分 是 保存 到 桌面 的 文件 名 ， 第 三 部 分 是 下 载 的 路 径 ， 对 应 的 JavaScript 代码 : 

var filelink = document.getElementById("filelink"); 

// 在 链接 拖 忠 开始 时 

file.addEventListener("dragstart", function(e){ 


e.dataTransfer.setData ("DownloadURL", DownloadURL); 
),false); 


当然 ， 也 不 一 定 非 得 用 路 径 ， 用 base64 编码 过 的 data:image 字符 串 也 可 以 : 


<a href="#" id-"filelink2" draggable-"true" data-downloadurl-" 
application/octet-stream 
:SavedFileName.png 
:data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAABAAAAAQAQMAAAA]PWOiA 
AAABlBMVEUAAAD///*12Z/dAAAAMOlEQVRA4nGP4/5/h/14G/58ZDrAz3D/MCH8yw83NDDeN 
Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtOAAAAAElFTkSuQmCC"»DragMeToDownload 
Pic</a> 


关于 文件 操作 的 更 多 内 容 ， 我 们 将 在 接 下 来 的 章节 中 学 习 。 


4.5 文件 操作 


过 去 Web 程 序 不 能 替代 桌面 程序 的 一 个 重要 原因 就 在 于 浏览 器 对 于 文件 操作 API 的 缺 
失 。 照 片 处 理 中 的 裁剪 、 滤 镜 ， 二 维 码 的 读 取 与 识别 ， 文 档 的 查看 和 编辑 …… 这 些 功能 无 
一 不 依赖 文件 的 操作 ，HTML 5 赋予 了 浏览 器 几乎 和 本 地 程序 同等 强大 的 文件 操作 能 力 。 

File API 是 HTML 5 在 DOM 标准 中 添加 的 功能 ， 它 允许 Web 内 容 在 用 户 授权 的 情况 
下 选择 本 地 文件 并 读 取 它们 的 内 容 一 一 通过 File. FileList 和 FileReader 等 对 象 共同 作用 来 
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4.5.1 选择 文件 


由 于 Web 环境 的 特殊 性 ， 浏 览 器 不 允许 JavaScript 直接 访问 文件 系统 〈 试 想 一 下 ， 你 
可 不 希望 一 打开 一 个 网 页 就 开始 疯狂 扫描 你 的 磁盘 然后 上 传 敏感 隐私 文件 到 某 个 不 知名 的 
基地 组 织 吧 )， 但 可 以 通过 file 类 型 的 input 元 素 或 者 拖 放 的 方式 进行 选择 文件 操作 : 


<input type-"file" id="filel"> 


file 表单 可 以 让 用 户 选取 一 个 或 者 多 个 文件 (multiple 属性 )， 通 过 File API， 可 在 用 户 
选择 文件 后 访问 到 代表 了 所 选 文件 列表 的 FileList 对 象 , FileList 对 象 是 一 个 类 数组 的 对 象 ， 
其 中 包含 着 一 个 或 多 个 File 对 象 。 如 果 没 有 multiple 属性 或 者 用 户 只 选 了 一 个 文件 ， 那 么 
只 需要 访问 FileList 对 象 的 第 一 个 元 素 : 

//files 是 一 个 FileList 的 实例 


var filelist = document.getElementById('filel').files 
var selectedFile - filelist[0] 


使 用 input 元 素 时 ， 用 户 在 选择 文件 后 会 触发 其 change 事件 : 


var inputElement = document.getElementById("filel") 
inputElement.addEventListener("change", handleFiles, false) 
function handleFiles() ( 

var fileList - this.files 


) 
和 其 他 类 数组 对 象 一 样 ，FileList 也 有 length 属性 ， 可 以 轻松 遍历 其 File 对 象 : 


for (var = 0, numFiles = files.length; i < numFiles; i++) ( 
var file - files[i] 


: E 


File 对 象 有 三 个 很 有 用 的 属性 ， 它 们 计 括 了 关于 该 文件 的 许多 有 用 信息 。 

O name: 文件 名 ， 不 包含 路 径 信息 。 

口 size: 文件 大 小 ， 以 byte 为 单位 。 

O type: 文件 的 MIME type. 

要 注意 这 三 个 属性 都 是 只 读 的 。 

有 时 候 你 可 能 觉得 浏览 器 自 带 的 文件 选择 控件 不 好 看 ， 这 时 你 可 以 提供 自己 的 按钮 ， 
并 将 原始 的 input 隐藏 掉 ， 通 过 JavaScript 在 按钮 的 click 处 理 函 数 里 面 手动 触发 文件 选择 
控件 的 click 事件 : 


<input type-"file" id-"fileElem" multiple accept-"image/*" 
Style-"display:none" onchange-"handleFiles (this.files)"» 
<a class="btn" href-"£" id="fileButton"> 选 择 文件 </a> 


此 HIML 片段 对 应 如 下 代码 : 


var fileSelect = document.getElementById ("fileButton"), 
fileElem = document.getElementById ("fileElem") 
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fileSelect.addEventListener("click", function (e) 
if (fileElem) ( 
fileElem.click() 
} 
e.preventDefault () 


}, false) 
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// 如 果 是 链接 应 该 阻止 其 默认 行为 


这 种 方式 在 大 多 数 浏览 器 都 可 以 工作 , 但 是 某 些 浏览 器 里 面 会 因为 安全 原因 被 禁用 (下 


虽然 可 以 触发 click 事件 ,但 是 选择 文件 后 在 change 事件 中 调用 


大 | 
是 将 input[file] 表 单 的 透明 度 设 置 为 0， 然后 外 层 用 label 标签 履 
在 lable 当中 ， 如 : 


-transparent-file( 
opacity: 0; 
-moz-opacity: 0; 
filter:alpha (opacity-0); 
position: absolute; 
width:88px; 
height:32px; 
top:0; 
left:0; 


) 
-file-lable( 
position: 
) 
-button(í 
/* 具体 button 的 样式 */ 
) 


relative; 


HTML 可 能 是 这 样 : 


<label for="" class="file-lable btn"> 


表单 的 submit 方法 会 报错 ， 
此 自动 上 传 无 法 成 功 ), 此 时 可 以 通过 一 个 更 tricky 的 方式 来 实现 自 定义 按钮 。 基本 原理 


Tid E input, AFR 


/* 使 用 定位 让 lable 和 input 重合 */ 


<input type="file" class="transparent-file" name="picture" /> 
单 击 上 传 

«/label» 

除了 单 击 ， 更 炫 的 方式 自然 是 通过 拖 息 来 选择 文件 ， 前 面 的 章节 已 经 简单 说 过 ， 需 要 


通过 访问 dataTransfer 的 files 属性 来 访问 。 下 面 给 出 
<style> 
.dropzone { 
width: 200px; 
height: 100px; 
border: 2px dashed #ddd; 
text-align: center; 
padding-top: 100px; 
color: 4999; 
} 
</style> 
<div id-"dropzone" 
拖 电文 件 到 此 处 
«/div» 
<div id-"output" class-"output"» 


class-"dropzone"» 


«/div» 
<script> 
function getFileInfo (file) { 


-个 拖 电文 件 显 示 文 件 详情 的 例子 


xi = 
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yar aMultiples = I "KB. "MB "GR "TB PPRT, EH" TZET Un yp] Silents 

var info = "文件 名 : ' + file.name ; 

// 计 算 文件 大 小 的 近似 值 

for (var nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox 
/= 1024, nMultiple-4) { 

sizeinfo = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " ("+ 

file.size + " bytes)"; 

H 

info += "; 大 小 : " + sizeinfo 

info += "; 类 型 : " + file.type 


return info + '«br»' 


i 


var dropzone = document .getElementById ('dropzone') 
dropzone.addEventListener('drop', function (e) ( 
var html = "您 一 共 选 择 了 ' + e.dataTransfer.files.length + ' 个 文件 ， 文件 信 
息 如 下 : «br»'; 
[].forEach.call(e.dataTransfer.files, function (file) ( 
html += getFileInfo(file) 
) 
document.getElementById('output').innerHTML - html 
e.preventDefault () 
e.stopPropagation() 
), false) 
dropzone.addEventListener('dragover', function (e) ( 
if (e.preventDefault) ( 
// 必 须要 阻止 dragover 的 默认 行为 ( 即 不 可 drop) ， 这 样 才能 进行 drop 操作 
// 和 否则 不 会 触发 drop 事件 
e.preventDefault () 
) 
return false 
), false) 
</script> 


运行 后 的 效果 如 图 4.10 所 示 。 


您 一 共 选 择 了 2 个 文件 ,文件 信息 
文件 名 : 1jpg; 大 小 : 752) «8/975 bytes); 类 型 : image/jpeg 
文件 名 : 2 png; 大 小 : 48.628 KB (49795 bytes); 类 型 : image/png 


图 4.10 拖 上 忠文 件 获取 文件 信息 


4.5.2 ”操作 文件 


前 面 讲 到 表单 或 者 dataTransfer 对 象 中 的 File 类 型 的 实例 代表 着 这 个 文件 ， 但 是 这 个 
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文件 对 象 只 能 访问 到 一 些 基 本 的 信息 〈 大 小 和 文件 名 等 )， 如 果 要 访问 文件 的 具体 内 容 ,， 还 
得 借助 FileReader 对 象 。 


1. FileReader 对 象 


FileReader 对 象 可 以 将 文件 对 象 转换 为 字符 串 、DataURL 对 象 或 者 二 进 制 字符 串 等 对 
象 ， 以 进行 进一步 操作 。 例 如 ， 在 做 图 片上 传 功能 时 ， 可 以 先 对 选择 的 图 片 进行 预览 或 者 
裁 前 ， 待 用 户 确认 无 误 了 再 进行 上 传 ， 可 以 节省 许多 不 必要 的 带宽 。 以 前 文 的 拖 抱 文件 例 
子 为 基础 ， 加 上 拖 奥 图片 预览 功能 : 


function handleFiles(files) ( 
var preview = document.getElementById('preview') 
for (var i = 0; i < files.length; i++) ( 
var file = files[i] 
// 用 来 过 滤 非 图 片 类 型 


var imageType = /image.*/ 


if (!file.type.match(imageType)) ( 
continue 
) 
// 只 能 动态 创建 img 对 象 来 进行 预览 
var img = document.createElement ("img") 
// 将 文件 对 象 存 起 来 
img.file = file 
// 新 建 FileRead 对 象 一 是 不 是 很 简单 
var reader = new FileReader() 
/ /FileReader 在 读 取 文件 时 是 异步 执行 的 JS 中 许多 对 象 都 有 类 似 API) ， 因 此 需要 通过 
绑 定 其 load 事件 来 访问 文件 读 取 的 结果 
// 要 注意 ， 这 里 使 用 了 闭 包 ， 因 为 img 只 保存 当前 函数 (handleFiles) 内 的 引用 ，for t 
环 并 不 会 创建 新 的 作用 域 
// 因 此 要 通过 一 个 闭 包 的 形式 复制 一 份 img 的 引用 ， 否 则 img 在 for 循环 结束 后 将 只 引用 最 
后 一 次 创建 的 img 元 素 
reader.onload = (function (aImg) ( 
return function(e) { 
//e.target.result 包含 读 取 到 的 dataURL 信息 
almg.src = e.target.result 
// 将 图 片 插入 当前 文档 
preview.appendChild (aImg) 
) 
}) (àmg) 
/ /readAsDataURL 方法 将 file 对 象 读 取 为 dataURL 
reader.readAsDataURL (file) 
) 
) 
var dropzone = document.getElementById('dropzone') 
dropzone.addEventListener('drop', function (e) { 
handleFiles (e.dataTransfer.files) 
e.preventDefault() 
e.stopPropagation() 
}, false) 


从 上 面 例子 可 以 看 到 FileReader 的 基本 用 法 。readAsDataURL 方法 用 于 读 取 文件 ， 它 
接受 一 个 File 或 者 Blob 对 象 的 实例 作为 参数 ,并 将 文件 内 容 转 换 为 一 个 base64 编码 的 URL 
字符 串 ， 并 通过 load. 事件 将 结果 传递 到 etargetresult 上 。FileReader 对 象 除了 


= 
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readAsDataURL 方法 外 ， 还 有 其 他 儿 个 方法 用 于 进行 读 取 文件 内 容 的 操作 。 


口 readAsArrayBuffer(Blob|File): 读 取 文件 ， 最 后 result 属性 将 包含 ArrayBuffer 对 象 


以 表示 文件 内 容 。ArrayBuffer 对 象 是 用 来 表示 固定 长 度 二 进 制 数据 的 缓冲 区 。 
O readAsBinaryString(Blob|File): 读 取 文 件 ，result 属性 包含 文件 的 原始 二 进 制 数 
每 个 字 节 均 由 一 个 [0..255] 范围 内 的 整数 表示 。 


码 ， 默 认为 UTF-8。 


方法 会 抛 出 DOM FILE ABORT ERR 异常 。 


2. Blob 对 象 


据 。 


口 readAsText(Blob|File, encoding): 以 文本 方式 读 入 文件 ， 并 可 以 指定 返回 数据 的 编 


O abot): 终止 正在 进行 的 读 取 操 作 。 如 果 FileReader 对 象 没有 进行 读 操作 ， 调 用 此 


以 上 读 取 文 件 操作 的 方法 有 两 个 共同 点 ， 一 是 都 接受 一 个 Blob 或 File 类 型 的 对 象 。 


说 到 这 里 不 得 不 多 说 两 名 关于 Blob 的 事 儿 。 


一 个 Blob 对 象 就 是 一 个 包含 有 只 读 原 始 数据 的 类 文件 对 象 一 一 其 实 File 类 型 就 派生 
H Blob 类 型 ,并且 扩展 了 支持 操作 用 户 本 地 文件 的 功能 。Blob 对 象 可 以 直接 调用 构造 函 


数 来 生成 : 


var fileParts = ['<a>hey man</a>'] 


//Blob 构造 函数 接受 两 个 参数 ， 一 个 是 parts 数组 ， 数 组 可 以 是 任意 多 个 Blob、DOMString 
和 ArrayBuffer 对 象 一 这 意味 着 Blob 本 质 上 就 是 任意 数据 的 片段 。 另 一 个 参数 是 一 个 对 象 ， 用 


于 设置 Blob 对 象 的 一 些 属性 
var myBlob = new Blob(fileParts, { "type" : "text/xml" ]) 


Blob 对 象 还 支持 slice 方法 ， 用 于 对 数据 进行 切割 ; 


// 切 割 第 10 到 第 20 个 字 节 ， 返 回 新 的 Blob 对 象 
var yourBlob = myBlob.slice(10, 20) 


File 对 象 同 样 继承 了 Blob 的 slice 方法 ， 你 可 以 利用 此 方法 对 File 对 象 预先 进行 分 


Lip 


然后 再 读 取 、 上 传 ， 最 后 在 服务 器 端 进行 组 装 一 一 异步 上 传 的 原理 就 是 这 样 。 如 果 再 记 住 


分 割 点 ， 这 样 即便 网 络 中 途 断 掉 ， 也 可 以 在 下 次 传输 时 从 断 点 续 传 。 
A S: File 虽然 派生 自 Blob， 但 是 File 对 象 却 不 能 直接 构造 。 


除了 都 接受 Blob/File 对 象 ， 这 些 方法 另外 一 个 共同 点 是 ， 由 于 JavaScript 本 身 基于 
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件 驱动 ， 这 些 和 平台 相关 的 方法 都 是 异步 方法 。 即 调用 时 立即 返回 ， 读 取 文 件 操作 完成 后 


再 触发 相应 的 load 事件 。 

除了 load 事件 ，FileReader 对 象 还 会 调用 这 样 一 些 事件 处 理 程 序 。 
onabort: 当 读 取 操 作 被 终止 时 调用 (调用 abort 方法 ) 。 
onerror: 当 读 取 操 作 发 生 错 误 时 调用 。 
onload: 当 读 取 操作 成 功 完成 时 调用 。 
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或 者 onerror 之 后 调用 。 
onloadstart: 当 读 取 操 作 将 要 开始 之 前 调用 。 
onprogress: 在 读 取 数 据 过 程 中 周期 性 调用 。 


口 口 


* 186* 


onloadend: 当 读 取 操 作 完成 时 调用 ， 不 管 是 成 功 还 是 失败 ， 该 处 理 程序 在 onload 
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onprogress 这 可 能 是 最 有 用 的 事件 了 ， 在 加 载 较 大 的 文件 时 ， 你 可 以 提供 一 个 进度 条 
让 用 户 知道 当前 加 载 进度 ， 不 让 用 户 产 生 焦躁 感 。 


reader.onprogress = function (e) { 


//e.total 存储 着 当前 文件 的 总 大 小 〈 字 节 ) ，e .loaded 表示 当前 文件 已 经 加 载 了 多 少 
console.1og(' 当 前 文件 已 加 载 : ' + (e.loaded / e.total* 100).toFixed(2) + '$') 


要 想 将 图 片 文件 转换 成 可 以 直接 在 HTML 里 引用 的 URL， 除 了 前 文 提 到 的 
readAsDataURL 方法 ， 还 可 以 使 用 window.URL.createObjectURL0O 方 法 : 


//objectURL 最 后 会 得 到 一 个 类 似 blob:null/a672ae4c-f84e-45d2-87ae-f45dc 


986d601 的 字符 串 ， 这 个 字符 串 可 以 直接 被 IMG 等 元 素 引 用 。 
var objectURL = window.URL.createObjectURL (fileObj); 


objectURL 和 dataURL 一 样 可 以 直接 被 img 的 sre 属性 引用 ， 就 像 Windows 平台 下 的 
文件 句柄 或 者 Linux 下 的 文件 描述 符 ， 在 使 用 完 之 后 通常 还 要 调用 window.URL. 
IevokeObjectURL(0 方 法 进行 释放 ， 如 果 不 显示 调用 该 方法 ，objectURL 将 会 在 文档 卸载 
Cunload) 时 自动 释放 。 对 于 前 文 的 例子 可 以 简单 修改 为 URL 对 象 版 本 : 

function handleFiles(files) { 

var preview = document.getElementById('preview') 


for (var i 0; i < files.length; i++) ( 
var file files[i] 


var img = document.createElement ("img") 
img.src = window.URL.createObjectURL (file) 
img.onload = function(e) ( 


// 图 片 onload 之 后 已 经 存在 于 内 存 之 中 ， 此 时 无 须 再 引用 文件 句柄 (或 描述 符 ) 
window.URL.revokeObjectURL (this.src) 


preview.appendChild (img) 
} 
有 了 操作 文件 的 利器 ， 你 可 以 干 非常 多 而 有 趣 的 事情 ， 比 如 实现 类 似 PhotoShop 中 图 
片 处 理 的 滤 镜 或 者 读 取 PDF 文档 并 转换 为 HTML 格式 等 等 。 


ws 


第 S$ 章 指 尖 下 的 浏览 


苹果 的 iPhone 和 iPad 等 设备 将 人 类 的 手指 从 鼠标 键盘 这 些 设备 中 解放 了 出 来 ， 先 进 
的 电容 屏幕 上 的 多 点 触 控 手势 重新 定义 了 与 计算 设备 进行 人 机 交互 的 方式 。 在 很 长 一 段 时 
HE, Web 开发 者 们 一 度 眼红 于 Object C 社区 的 “高 富 帅 ” 们 一 一 因为 在 浏览 器 里 面 ， 多 
点 触 控 似乎 跟 我 们 关系 不 大 。 

实际 上 ， 苹 果 从 一 开始 就 在 iOS 的 浏览 器 Safari 上 提供 了 访问 手指 的 方式 ， 这 些 访问 
触摸 行为 的 API 也 顺理成章 延伸 到 了 Android 设备 中 ， 最 后 也 写 进 了 HIML 5 相关 标准 。 


5.1 基本 touch 事件 


由 于 类 似 iPhone 这 样 的 移动 设备 默认 情况 下 没有 鼠标 , 因此 基于 鼠标 的 事件 模型 无 法 
完整 地 发 挥 它 的 能 力 。 一 方面 在 失去 了 鼠标 的 情况 下 ， 对 于 一 些 简单 的 手指 交互 情况 还 可 
以 用 鼠标 事件 来 模拟 的 方式 ， 比 如 用 户 在 用 手指 点 击 的 情况 下 会 触发 click 和 mousedown 
事件 ， 另 一 方面 对 于 复杂 一 点 的 触 控 操作 ， 比 如 点 触 (tap)、 滑 动 (slide)、 捏 合 (pinch) 
和 旋 拧 (rotate) 等 ， 这 些 操 作 场景 无 法 用 鼠标 事件 进行 模拟 ， 这 时 候 我 们 需要 一 套 新 的 事 
件 模 型 。 
touch 事件 模型 现 阶段 规定 了 很 多 种 类 型 的 触摸 事件 ， 而 以 下 三 种 是 应 用 最 广泛 的 。 
口 touchstart: 手指 刚 放 到 屏幕 上 某 个 DOM 元 素 里 的 时 候 该 元 素 触发 。 
口 touchmove: 手指 紧 贴 屏幕 移动 的 时 候 连 续 触发 。 
O touchend: 手指 从 屏幕 上 抬 起 的 时 候 触 发 。 
这 些 个 事件 都 会 顺 着 DOM 树 向 上 冒 泡 ， 并 产生 一 个 触摸 事件 对 象 ， 触 摸 事 件 对 象 包 
含 这 样 一 些 共通 的 事件 属性 。 
O touches: 表示 当前 位 于 屏幕 上 的 所 有 手指 动作 的 列表 ， 是 一 个 TouchList 类 型 的 对 
象 ，TouchList 是 一 个 类 数组 对 象 ， 它 里 面 装 的 是 Touch 对 象 。 

口 targetTouches: 位 于 当前 DOM 元 素 上 的 手指 动作 的 TouchList 列表 。 

口 changedTouches: 涉 当前 事件 的 手指 动作 的 列表 。 例 如 ， 在 一 个 touchend 事件 中 ， 
这 将 是 移 开 的 那 根 手指 。 

从 这 些 事件 属性 中 可 以 看 到 ,touchstart 等 事件 在 触发 时 是 允许 多 个 手指 同时 触摸 屏幕 
的 ， 每 一 根 手指 都 会 产生 一 个 Touch 对 象 。Touch 对 象 和 鼠标 事件 的 事件 对 象 非常 类 似 ， 
包含 以 下 属性 。 

口 identifier 一 个 数字 ， 用 于 唯一 标识 触摸 会 话 中 的 当前 手指 。 

口 target， 作 为 动作 目标 的 DOM 元 素 。 

口 坐标 相关 ， 该 手指 动作 在 屏幕 上 发 生 的 位 置 ， 有 以 下 几 点 。 

图 ”clientX /clientY: 触摸 点 相对 于 浏览 器 窗口 viewport 的 位 置 。 
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E pageX/pageY: 触摸 点 相对 于 页 面 的 位 置 。 
Wi screenX / screenY: 触摸 点 相对 于 屏幕 的 位 置 一 一 通常 来 说 和 clientX / clientY 
在 计算 时 的 区 别 就 是 少 了 一 个 状态 栏 和 地 址 栏 。 
O 半径 坐标 和 rotationAngle: 可 以 用 这 个 属性 画 出 与 手指 形状 类 似 的 椭圆 形 , 但 是 一 
般 情况 下 用 不 到 。 
有 了 这 些 基 本 的 事件 和 其 事件 对 象 几乎 可 以 实现 所 有 的 手势 。 不 过 我 们 先 来 看 一 个 简 
单 的 例子 ， 这 个 例子 要 实现 的 功能 是 ， 当 你 将 手指 放置 到 屏幕 上 时 ， 屏 幕 上 就 会 出 现 一 个 
“ 光 点 ” 随 着 手指 移动 ， 光 点 也 随 之 移动 ， 如 果 手 指 移 开 ， 光 点 也 随 之 消失 : 


«html» 
<head> 
<meta charset="utf8"> 
<!-- 在 触 屏 一 定 记 得 禁止 缩放 ， 和 否则 touch 事件 会 很 混乱 ， 难 以 管理 --> 
«meta name-"viewport" content-"width-device-width, initial-scale-1, 
maximum-scale-1, user-scalable-no"» 
«style» 
body { 
color:white; 
background-color: #222; 


) 
/* 给 光 点 加 上 像 光 点 的 样式 */ 
-Spot { 
position: absolute; 
width: 70px; 
height: 70px; 
border-radius: 35px; 
box-shadow: Opx Opx 40px #fff; 
background-color: #fff; 
opacity: Ts 
} 
</style> 
</head> 
<body> 
这 里 有 一 些 不 怎么 重要 的 文字 
<script> 
var spot = null 
//touch 所 有 类 型 事件 都 会 冒 泡 ， 在 document 上 绑 定 touch 事件 是 一 种 简单 粗暴 的 处 理 方式 
document.addEventListener('touchstart', function (e) ( 
// 如 果 阻 止 了 touchstart 的 默认 行为 ， 后 续 的 mousedown 和 click 事件 将 不 会 触发 
e.preventDefault() 
// 如 果 已 经 生成 小 光 点 了 ， 就 直接 返回 
if (spot) ( 
return 
) 
spot = document.createElement ('div') 
Spot.classList.add('spot') 
// 减 去 35 是 让 " 光 点 "能 够 位 于 手指 的 中 间 
spot.style.top = e.touches[0].pageY - 35 
spot.style.left = e.touches[0].pageX - 35 
document . body .appendChild (spot) 


}, false) 
document .addEventListener ('touchmove', function (e) { 


// 如 果 阻 止 了 touchmove 的 默认 行为 ， 后 续 的 mousemove 事件 将 不 会 触发 
e.preventDefault () 
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if (spot) t 
Spot.style.top = e.touches[0].pageY - 35 
spot.style.left = e.touches[0].pageX - 35 
} 
}) 
document .addEventListener ('touchend', function (e) { 
// 如 果 阻 止 了 touchend 的 默认 行为 ， 后 续 的 mouseup 和 click 事件 将 不 会 触发 
e.preventDefault () 
if (spot) 4 
// 删 除 这 个 " 光 点 " 
document .body.removeChild (spot) 
spot = null 
} 
) 
</script> 
</body> 
</html> 


可 以 看 到 ， 上 面 的 代码 里 无 时 无 刻 都 在 阻止 默认 的 鼠标 事件 ， 在 正常 情况 下 ， 一 次 触 
摸 会 按 这 样 的 顺序 触发 事件 : 


touchstart -> 


mousedown -> // 如 果 touchstart 中 没有 preventDefault 的 话 
touchmove -> 
mousemove -> // 如 果 touchstart & touchmove 中 没有 preventDefault 的 话 


touchend -> 
mouseup -> 
click 


在 iOS 上 click 事件 会 有 大 概 300ms 的 延 时 触发 机 制 ， 因 为 用 户 有 可 能 会 连续 轻 触 两 
次 屏幕 来 触发 一 个 缩放 事件 以 放大 /缩小 整个 网 页 〈 这 也 是 禁止 网 页 缩放 的 原因 之 一 )， 如 
果 轻 触 屏 幕 就 立即 触发 click 事件 ， 可 能 会 产生 非 预期 的 行为 。 因 此 即便 是 浏览 器 模拟 了 
click 和 mousedown 等 事件 ， 在 移动 设备 上 使 用 时 效果 也 会 很 差 ， 而 对 于 mouseover, 
mousemove 包括 drag 系列 的 事件 ， 则 几乎 根本 无 法 触发 。 基于 这 些 原因 不 建议 在 要 兼容 移 
动 设备 的 Web 应 用 中 使 用 这 些 原本 为 鼠标 设计 的 事件 。 如 果 你 为 了 在 桌面 版 有 更 好 的 体验 
使 用 了 它们 ， 那 也 务必 要 在 移动 设备 中 提供 对 应 的 fallback 策略 。 

iOS 或 者 Android 的 设备 几乎 都 配备 了 多 点 触 控 的 屏幕 , 这 也 是 为 什么 touch 事件 对 象 
里 的 touches 属性 是 一 个 类 数组 对 象 。 对 上 面 的 例子 简单 改 一 改 ， 我 们 可 以 得 到 产生 多 个 
“ 光 点 ”的 程序 : 


<script> 
var spots = {}, touches, Cimer 
document.addEventListener('touchstart', function (e) { 
e.preventDefault () 
; [] -forEach.call (e.targetTouches, function (touch) { 
// 对 每 一 根 触摸 在 屏幕 上 的 手指 都 生成 一 个 元 素 ， 并 且 用 touch.identifier 作为 该 元 素 
的 唯一 标识 ， 以 在 触摸 结束 后 清除 引用 的 元 素 
if (spots[touch.identifier]) { 
return 
$ 
var spot = spots[touch.identifier] = document.createElement ('div') 
spot.classList.add('spot') 
spot.style.top - touch.pageY - 35 
spot.style.left = touch.pageX - 35 
document .body.appendChild (spot) 
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// 任 何 一 根 手 指 的 移动 都 会 导致 Couchmove 事件 触发 很 多 次 
// 这 里 使 用 一 个 timer 来 减少 泻 染 光 点 的 开支 
// 使 用 16ms 是 因为 1000 + 16 = 60fps 
timer = setInterval(function() { 
renderTouches (touches); 
), 16); 
), false) 


document.addEventListener('touchmove', function (e) ( 
e.preventDefault () 
touches = e.touches 
}) 
function renderTouches (touches) { 
if (!touches) { 
return 
} 
;[l.forEach.call(touches, function (touch) ( 
var spot = spots[touch.identifier] 
if (spot) ( 
Spot.style.top = touch.pageY - 35 
spot.style.left = touch.pageX - 35 
l 
}) 
} 
document.addEventListener('touchend', function (e) ( 
e.preventDefault () 
//changedTouches 存储 变化 了 的 指头 ， 在 touchend 事件 代表 着 离开 屏幕 的 指头 
; [] .forEach.call (e.changedTouches, function (touch) ( 
var spot = spots[touch.identifier] 
if (spot) ( 
document.body.removeChild (spot) 
delete spots[touch.identifier] 
l 
}) 
if (e.changedTouches.length === 0) { 
clearInterval (timer) 
} 
) 
</script> 


最 后 在 iPhone 上 的 效果 如 图 5.1 所 示 。 
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AE: (1) 在 iPhone 的 浏览 器 里 面 ， 最 多 只 支持 五 点 触摸 。 
(2) 上 例如 果 要 获得 更 好 的 绘图 性 能 可 以 使 用 canvas。 


52 ”模拟 手势 事件 


仅仅 使 用 原生 的 touch. 系列 事件 在 实际 开发 时 难免 有 点 捉襟见肘 ， 因 为 大 多 数 我 们 需 
要 的 是 手势 一 一 比如 手指 开 合 或 者 滑动 。 

如 果 我 们 要 实现 向 左 滑动 的 手势 ， 思 路 可 能 是 这 样 的 : 

(1) 在 touchstart 事件 触发 时 记录 手指 的 位 置 ， 并 绑 定 touchmove 事件 。 

(2) touchmove 事件 根据 当前 手指 的 位 置 计 算 手 指 移动 的 距离 ， 若 大 于 某 个 值 ， 便 认 
为 触发 了 swipe 手势 。 

有 了 思路 ， 实 现 就 简单 了 : 


<meta charset="utf8"> 
«meta name-"viewport" content-"width-device-width, initial-scale-1, 
maximum-scale-1, user-scalable-no"» 
«style» 
.touch-box ( 
background-color: #444; 
color: white; 
width: 200px; 
height: 200px; 
} 


</style> 
<div id="touch-box" class="touch-box"> 
滑动 进行 变色 ! 
</div> 
<script> 
var bgColors = ['#BBODOD', '#189135', "#1173C0'] 
var idx = 0 


var el = document.getElementById('touch-box') 
var startX, startY 


function handleStart(e) ( 
// 如 果 不 是 一 根 指头 就 跳 过 不 处 理 


if (e.touches.length !== 1) return 


StartX 
startY 


= e.touches[0].pageX 

= e.touches[0].pageY 

// 在 touch 开始 后 再 绑 定 touchmove 事件 会 节省 一 些 不 必要 的 开销 
el.addEventListener('touchmove', handleMove, false) 


) 


function handleMove(e) { 
var touches - e.touches 
if (touches && touches.length) { 
// 记 录 手 指 在 x lv 方向 移动 的 值 
var deltaX = startX - touches[0].pageX 
var deltaY - startY - touches[0].pageY 
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// 如 果 横 着 向 左 移动 超过 50， 便 记 为 一 次 swipeLeft 操作 
if (deltaX >= 50) í 
console.log('swipeLeft') 
ïdz = (idx + 1) %3 
// 随 机 给 方 框 设 置 一 个 颜色 
el.style.backgroundColor = bgColors[idx] 
} 
if (deltaX <= -50) ( 
console.log('swipeRight') 
// 倒 着 来 变色 
idg = idz >= 1 idt = 1:2 
el.style.backgroundColor = bgColors [idx] 
) 
if (deltaY >= 50) ( 
console.log('swipeUp') 
} 
if (deltaY <= -50) { 
console.log('swipeDown') 
l 
// 当 任何 一 个 方向 的 阔 值 大 于 50 了 就 移 除 事件 处 理 函 数 ， 以 免 重复 触发 swipe 操作 
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) ( 
el.removeEventListener('touchmove', handleMove) 
) 
l 
event.preventDefault () 


) 


el.addEventListener('touchstart', handleStart) 
«/script» 


更 好 的 做 法 是 为 元 素 触 发 swipe 事件 ， 以 解 看 事件 与 处 理 罗 辑 〈 如 果 你 使 用 jQuery 或 
者 其 他 带 有 自 定义 事件 模块 的 框架 则 应 该 使 用 它们 各 自 提供 的 派发 事件 的 接口 ): 


function handleMove(e) ( 
var touches - e.touches 
if (touches && touches.length) ( 
// 记 录 手 指 在 Xx 和 YY 方向 移动 的 值 
var deltaX = startX - touches[0].pageX 
var deltaY - startY - touches[0].pageY 


if (deltaX »- 50) ( 
//CustomEvent 构造 函数 用 于 新 建 事件 对 象 ， 
// 第 二 个 参数 是 一 个 对 象 ， 其 中 可 以 指定 事件 是 否 冒 泡 (bubbles) 、 是 否 可 以 取消 
(bubbles) 和 额外 数据 detail) 
el.dispatchEvent (new CustomEvent('swipeLeft', ( bubbles:true ])) 
j; 
if (deltaX <= -50) { 
el.dispatchEvent (new CustomEvent ('swipeRight', { bubbles:true })) 
l; 
if (deltaY >= 50) { 
el.dispatchEvent (new CustomEvent ('swipeUp', { bubbles:true })) 
] 
if (deltaY «- -50) ( 
el.dispatchEvent (new CustomEvent('swipeDown', { bubbles:true ])) 
} 
// 当 任何 一 个 方向 的 阔 值 大 于 50 了 就 移 除 事件 处 理 函数 ， 以 免 重复 触发 swipe 操作 
if (Math .abs (deltaX) >= 50 || Math.abs (deltaY) >= 50) { 
el.removeEventListener('touchmove', handleMove) 


li 
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} 
event.preventDefault () 


i 


function handleSwipe(e) ( 
console.log (e) 
switch (e.type) { 
case 'swipeLeft': 
idx = (idx + 1) $ 3 
e.target.style.backgroundColor - bgColors[idx] 
break; 
case 'swipeRight': 
3dx = idr >= 1 2 3dx — 1 r2 
e.target.style.backgroundColor = bgColors [idx] 
break; 
default: 
break; 
H 
) 


el.addEventListener('touchstart', handleStart) 
el.addEventListener('swipeLeft', handleSwipe) 
el.addEventListener('swipeRight', handleSwipe) 
document.documentElement.addEventListener('swipeRight', handleSwipe) 


上 面 的 滑动 手势 虽然 基本 上 能 使 用 了 , 但 是 体验 还 非常 不 好 , 具体 表现 在 这 几 个 方面 : 

(1) 一 般 的 swipe 操作 都 是 非常 畅快 的 ， 但 我 们 的 swipe 无 论 滑动 速度 快 还 是 慢 都 会 
触发 事件 。 

(2) 往 斜 上 方 滑动 会 触发 两 个 swipe 事件 ， 理 想 情 况 下 应 该 是 只 触发 其 中 一 个 事件 。 

要 修缮 这 些 体 验 不 好 的 地 方 我 相信 对 于 聪明 的 你 都 不 成 问题 ， 但 对 于 如 此 常见 的 需 


5.3 hammer.js 


在 开源 社区 里 有 很 多 用 于 增强 touch 事件 或 手势 的 库 ， 而 我 们 将 要 介绍 的 hammerjs 
Cgithub.com/EightMedia/hammer.js/) 是 其 中 的 佼佼 者 之 一 。 hammerjs 不 像 其 他 重量 级 框架 ， 
hammer 仅仅 提供 了 一 组 模拟 多 点 触摸 手势 ， 并 且 不 依赖 其 他 任何 库 ，cdnjs.com 已 经 收录 
了 hammerjs。 在 你 的 Web 程序 里 引入 它 只 需 一 步 : 

<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/ 

hammer.min.js"></script> 

hammerjs 支持 几乎 所 有 常见 手势 , 包括 Tap、DoubleTap、Swipe、 Drag、 Pinch 和 Rotate 
等 ， 其 中 Swipe 和 Pinch 又 有 SwipeLeft, PinchIn 和 PinchOut 等 子 手势 。 

hammerjs 的 基本 用 法 和 jQuery 非常 类 似 : 


var el = document.getElementById ('touch-box') 

Hammer(el).on('swipeleft', function(e) ( 
alert (' 左 滑 成 功 !') 

E 


是 不 是 比 自己 写 swipe 事件 简单 了 许多 ? 比如 前 文 提 到 的 300ms 的 click 事件 延迟 ,我 
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们 可 以 用 hammer 实现 一 个 fastClick 事件 : 


function fastClick(el, handler) { 
el.addEventListener("click", function(e) ( 


// 必 须 阻止 元 素 的 click 的 默认 行为 
e.preventDefault () 
), false) 
//tap 事件 就 是 在 触摸 屏 上 的 click 事件 
//doubletap 自然 就 是 doubleclick 事件 的 触 屏 版 了 
/ /hammer 绑 定 事件 时 和 jQuery 一 样 ， 可 以 用 空格 分 割 来 绑 定 多 个 事件 
Hammer (el) .on("tap doubletap", handler) 

5 

hammer 有 一 些 选 项 可 以 通过 第 二 个 option 参数 传 入 ， 你 可 以 使 用 它 对 默认 设置 进行 
Bu 

var hammertime = Hammer(element, { 

drag: false, // 不 允许 拖 电 行 为 
transform: false //transform 规定 

}) 

hammer 的 触摸 事件 对 象 提供 了 丰富 强大 的 数据 ， 利 用 这 个 事件 对 象 你 可 以 实现 许多 
功能 ， 下 面 来 看 它 提供 了 哪些 好 用 的 属性 。 
timestamp: 事件 发 生 时 的 时 间 戳 。 
target: 事件 目标 。 
touches: 原始 事件 的 touches 对 象 。 
pointerType: 检测 指针 类 型 ， 可 能 是 touch 或 者 mouse。 
center: 指针 坐标 〈 包 含 pageX 和 pageY) 。 
deltaTime: 手指 处 于 屏幕 的 总 时 间 (以 ms 计算 )， 对 于 tap 这 样 的 操作 ，deltaTime 
必须 要 限定 在 一 定时 间 (默认 250ms) 内 才 会 触发 ， 而 hold 事件 deltaTime 则 必须 
大 于 某 个 阐 值 (默认 500ms) 。 
deltaX / deltaY: 手指 在 X 和 立方 向 移动 的 距离 。 
velocityX / velocityY: 手指 在 X/Y 方向 移动 的 速度 ， 对 于 swipe 事件 来 说 ， 速 度 必 
须 大 于 某 个 阔 值 (默认 0.7) 才 会 触发 。 
angle: 表示 手指 初始 点 与 当前 点 构成 直线 的 角度 。 
direction: angle 的 文字 版 ， 有 left、right、up 和 down 四 种 值 。 
distance: 手指 移动 的 距离 。 
scale: 在 双 指 触摸 时 的 缩放 比例 ，transform 事件 触发 时 有 用 。 

O rotation: 在 双 指 触摸 时 的 旋转 ，transform 事件 触发 时 有 用 。 

看 了 这 些 属性 ， 相 信 读 者 脑海 中 已 经 内 过 了 许多 有 趣 好 玩 儿 的 念头 。 那 就 让 我 们 先 来 
实现 一 个 双 指 缩放 图 片 的 功能 吧 。 思 路 很 简单 ， 绑 定 图 片 容 器 的 touch 和 drag 事件 ， 根 据 
scale 属性 的 大 小 动态 改变 图 片 的 大 小 ， 根 据 deltaX 和 deltaY 属性 改变 图 片 的 位 置 ， 根 据 
rotation 属性 改变 图 片 的 旋转 程序 : 


<!DOCTYPE html» 
«html» 
Xhead» 
«meta name-"viewport" content-"user-scalable-no, width-device-width, 


DODCOOCDUO 


Do 


DOCODOUO 


"ls 
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initial-scale=1, maximum-scale=1"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/ 
hammer .min.js"></script> 


<style> 
body { 
padding: 0; 
overflow: hidden; 
} 


#pinchzoom { 
overflow: hidden; 
width: 300px; 
height: 300px; 
background-color: #eee; 

} 

</style> 

</head> 


inchzoom"> 

"img" src="http://pr.bdimg.com/static/princess/img/ 
misc/baidu logo c352a179.gif" ondragstart="return false" alt="" /> 

</div> 

<script> 


var hammertime = Hammer (document.getElementById('pinchzoom'), { 
transform always block: true, 
transform min scale: 0.5, // 最 小 只 到 原 图 的 1/2 
drag block horizontal: true, 
drag block vertical: true, 
drag min distance: 0 


} 


var img = document.getElementById('img'); 

// 初 始 值 

var posX = 
posY = 0, 
scale = 1, 
last scale, 
rotation = 1, 
last rotation 


0, 


hammertime.on('touch drag transform', function(e) { 
switch (e.type) { 
// 当 touch 开始 时 记录 下 当前 的 缩放 量 、 旋 转 量 和 位 移 量 
case 'touch': 
last scale - scale 
last rotation = rotation 
last posX = posX 
last posY = posY 
break 
/ [A LI cce (SEE t 
case 'drag': 
posX = last posX + e.gesture.deltaX 
posY - last posY * e.gesture.deltaY 
break 
//hammer 提供 的 transform 事件 非常 好 用 
case 'transform': 
rotation = last rotation + e.gesture.rotation 
scale — Math.min(last scale * e.gesture.scale, 10) 
break 
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// 使 用 CSS3 transform 进行 图 片 的 变换 

Var transform = 
Ptranstate3d(" t posX + "px," + posY + "px; 0) "ct 
"scale3d(" + scale t "7" t scale t", 0) "E 
"rotate(" + rotation + "deg) " 


img.style.webkitTransform = transform 
H: 


</script> 
</body> 
</html> 


现在 我 们 已 经 可 以 对 这 个 百度 标志 进行 右倾 和 膨胀 的 改造 了 ， 如 图 5.2 所 示 。 


15:38 D @ 53", 


mac 


图 5.2 右倾 的 百度 logo 


hammerjs 也 支持 和 jQuery 绑 定 使 用 ,hammerjs 的 作者 提供 了 一 个 jQuery 的 插件 , 配 
合 使 用 可 以 实现 touch 事件 代理 : 

// 对 于 触摸 事件 必须 调用 hammer () 方法 新 建 hammer 对 象 ， 然 后 再 调用 on 方法 进行 事件 绑 定 

$('£test el').hammer().on("tap", ".nested el", function(e) ( 


console.log(this, e) 


) 


在 桌面 Web 上 最 常见 的 UI 控件 要 数 滑 动 门 了 (通常 被 称 作 carousel 或 slider)， 在 触 
摸 设备 上 这 一 传统 也 得 到 了 延续 一 一 无 论 是 浏览 图 片 还 是 右 滑 返 回 操作 ， 滑 动 交 互 的 场景 
层出不穷 。 不 过 这 一 炫 酷 的 交互 在 移动 版 的 Web 中 却 不 怎么 常见 ， 主 要 原因 还 是 touch 事 
件 没有 被 大 多 数 Web 开发 者 熟知 ， 而 且 原 生 的 事件 也 没有 足够 好 用 。 

好 消息 是 ， 使 用 hammerjs 的 swipe 和 drag 事件 可 以 非常 轻松 地 实现 这 一 交互 ， 我 们 
先 设计 一 套 HIML 作为 数据 的 容器 : 


<div id-"carousel"» 
«ul» 


<li class="panel"><h2> 左 滑 下 一 页 </h2></1i> 
<li class="pane2"><h2> 向 左 拖 电 也 可 以 </h2></1i> 
<li class="pane3"><h2> 右 滑 上 一 页 </h2></1i> 
<li class="pane4"><h2> 凑 页 数 </h2></1i> 

«li class="pane5"><h2> 青 凑 一 页 </h2></1i> 


“gs 
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</ul> 
</div> 


和 前 文思 路 一 致 ， 我 们 用 CSS 3 的 transform 和 transition 来 进行 版 面 间 的 切换 ， 顺 带 
加 上 一 些 样式 : 


<style> 
/* 一 些 reset css 代码 */ 
html, body, ul, li( 
padding: 0; 
margin: 0; 
5 
$carousel, £carousel ul, $carousel li { 
min-height: 400px; 
position: relative; 
h 
$carousel ( 
background: silver; 
overflow: hidden; 
width:100$; 
/*backface-visibility 的 意思 是 在 对 元 素 进行 变换 时 ， 如 果 元 素 的 “正面 ”看 不 到 了 CIE 
如 使 用 rotate 时 ) ， 那 么 就 隐藏 整个 元 素 。 这 在 处 理 flip 这 样 的 翻转 特效 时 有 用 */ 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1); 
/* preserve-3d 指定 元 素 的 子 元 素 应 该 在 3D 空间 中 进行 定位 */ 
-webkit-transform-style: preserve-3d; 


) 


/* 增加 一 个 额外 的 动画 样式 ， 在 切换 版 面 时 使 用 
使 用 css 动画 能 在 移动 设备 中 获得 比较 好 的 性 能 */ 


#carousel ul.animate { 
-webkit-transition: all .3s; 


} 


#carousel ul ( 
-webkit-transform: translate3d(0$,0,0) scale3d(1,1,1); 
overflow: hidden; 
-webkit-backface-visibility: hidden; 
-webkit-transform-style: preserve-3d; 


J 


#carousel ul { 
box-shadow: 0 0 20px rgba(0,0,0,.2); 
position: relative; 
) 
d$carousel li ( 
float: left; 
overflow: hidden; 
-webkit-transform-style: preserve-3d; 
-webkit-transform: translate3d(0,0,0); 
) 


$carousel li h2 { 
color: #fff; 
font-size: 30px; 
text-align: center; 
/* 设置 li 中 元 素 的 position 为 absolute， 脱 离 文档 流 ， 
因为 1i 本 身 进 行 了 浮动 ， 而 其 内 又 没有 在 流 中 的 元 素 ， 
因此 可 以 实现 在 初始 化 的 时 候 先 隐藏 所 有 的 1i 元 素 */ 
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position: absolute; 

top: 40%; 

left: 0; 

width: 100%; 

text-shadow: -lpx -lpx 0 rgba(0,0,0,.2); 


$ 

/* 加 上 一 些 背 景色 */ 

#carousel li.panel { background: #42d692; } 
#carousel li.pane2 { background: #4986e7; } 
#carousel li.pane3 { background: #d06b64; } 
#carousel li.pane4 { background: #cd74e6; } 
#carousel li.pane5 ( background: #9fele7; } 
</style> 


此 时 ,我 们 的 HTML 代码 和 样式 已 经 搞定 ， 接 下 来 要 考虑 如 何 设计 我 们 的 carousel 组 
件 了 。 一 个 朴素 简单 的 想法 是 设计 一 个 Carousel 类 ， 传 入 dom 元 素 为 参数 ， 将 内 部 由 的 
宽度 设置 为 所 有 内 部 宽度 的 和 ， 为 该 元 素 绑 定 dragleft 和 dragright 事件 ， 在 事件 触发 时 
VLA ul 的 位 移 CCSS transform), 释放 时 移动 到 下 一 个 (上 一 个 ) 面板 ( 即 li), 如果 有 swipe 
事件 触发 ， 则 直接 移动 到 相应 的 面板 ， 所 有 移动 面板 的 操作 都 以 动画 方式 进行 : 

/[** 

* Carousel 组 件 构造 函数 

function Carousel (selector) { 


var self = this 
var element = $(selector) 


var container - $("»ul", element) 
var panes - $("»ul»li", element) 


0 
panes.length 


var paneWidth 
var paneCount 


var currentPane - 0 


J[** 

* 初始 化 方法 

*/ 

this.init = function() { 
setPaneDimensions () 
// 重 点 在 于 orientationchange 事件 ， 它 用 来 检测 用 户 是 否 改变 了 屏幕 方向 
// 对 于 任何 改变 屏幕 尺寸 的 行为 ， 都 重新 设置 整个 面板 的 尺寸 
$(window).on("load resize orientationchange", function() ( 

setPaneDimensions() 

}) 

} 


[** 

* 将 所 有 面板 的 宽度 都 设置 为 外 部 元 素 的 宽度 ， 

* 然后 再 将 容器 Cul) 的 宽度 设置 为 所 有 面板 的 宽度 
* 这 样 可 以 让 所 有 面板 横着 一 一 排 好 

* 当然 这 个 步骤 也 可 以 使 用 CSS 来 实现 

s/ 

function setPaneDimensions() { 
paneWidth = element.width() 
panes.each(function() { 
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$ (this).width (paneWidth) 
H) 


container .width (paneWidth * paneCount) 


} 


/** 

* 切换 到 某 一 面板 

*/ 

this.showPane = function(index) { 
index = Math.max(0, Math.min(index, paneCount - 1)) 
currentPane = index 


var offset - -((100 / paneCount) * currentPane) 
setContainerOffset(offset, true) 


} 
A 


function setContainerOffset (percent, animate) { 
container.removeClass ("animate") 
if (animate) { 
container.addClass ("animate") 
} 
container.css("transform", "translate3d(" + percent + "$,0,0) scale3d 
(1,1,1)") 
) 


this.next = function() { 

return this.showPane(currentPane + 1, true) 
) 
this.prev = function() ( 

return this.showPane(currentPane - 1, true) 


) 


function handleHammer(e) ( 
console.log (e) 
// 禁 止 浏览 器 默认 的 滚动 行为 


e.gesture.preventDefault() 


switch (e.type) ( 
case 'dragright': 
case 'dragleft': 
// 让 面板 跟着 手指 移动 
var paneOffset = -(100 / paneCount) * currentPane 
var dragOffset = ((100 / paneWidth) * e.gesture.deltaX) / paneCount 


// 第 一 个 和 最 后 一 个 面板 无 法 青 进 行 拖 动 ， 因 此 降低 其 " 粘 手 "的 感觉 

if ((currentPane === 0 && e.gesture.direction === 'right') |I 
(currentPane === paneCount - 1 && e.gesture.direction === 'left')) { 
dragOffset *- 0.4 


} 


setContainerOffset (dragOffset + paneOffset) 
break 


case 'swipeleft': 
self.next() 
// 当 触发 了 swipe 后 ， 调 用 stopDetect 停止 探测 其 他 手势 
e.gesture.stopDetect () 
break 


* 200 * 


第 5 章 指 尖 下 的 浏览 


case 'swiperight': 
self.prev() 
e.gesture.stopDetect () 
break 


case 'release': 
// 在 拖 忠 时 ， 如 果 拖 动 幅度 超过 503 之 后 松手 ， 那 么 这 一 次 导航 是 有 效 的 
if (Math.abs(e.gesture.deltaX) > paneWidth / 2) ( 
if (e.gesture.direction === 'right') { 
self.prev() 
) else ( 
self.next() 
) 
) else ( 
self.showPane(currentPane, true) 
) 
break 
} 
} 


element.hammer ({ 
drag lock to axis: true 
}) .on("release dragleft dragright swipeleft swiperight", handleHammer) 


使 用 方式 非常 简单 : 


<script src-"carousel.js"»«/script^ 
<script> 

var carousel = new Carousel ("#carousel") 
carousel.init() 

</script> 


最 终 使 用 效果 非常 棒 ， 几 乎 和 原生 应 用 毫 无 二 致 ， 如 图 5.3 所 示 。 


图 5.3 carousel 


5.4 实例 : 精 仿 iOS 的 相册 


有 了 前 面 两 个 例子 ， 相 信 你 已 经 开始 跃跃欲试 了 ， 那 我 们 来 一 剂 强 心 的 例子 一 一 模仿 


“ls 
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iOS 自 带 相册 ， 实 现 一 个 相册 浏览 器 功能 。 
首先 我 们 要 想 想 一 个 触摸 相册 浏览 的 交互 过 程 : 
(1) 左右 滑动 切换 图 片 。 
(2) 双击 放大 图 片 。 
G) 放大 图 片 后 进入 单 张 图 片 浏览 模式 ， 此 时 可 以 双 指 开 合 缩放 ， 旋 转 双 指 可 旋转 
图 片 。 
(4) 再 次 双击 缩小 图 片 ， 此 时 可 以 继续 滑动 切换 查看 其 他 图 片 。 
基本 的 交互 就 是 这 样 ， 对 于 第 一 步 ， 前 面 的 carousel 的 例子 只 要 稍微 改 一 下 便 可 以 
工作 : 
<div id="carousel"> 
<ul> 
<li class="panel"><img src-"../assets/imgl.jpg" alt-""»«/li» 
Xli class-"pane2"»«img src-"../assets/img2.jpg" alt-""»«/li» 
Xli class-"pane3"»«img src-"../assets/img3.jpg" alt-""»«/li» 
<li class-"pane4"»«img src-"../assets/img4.jpg" alt-""»«/li» 
<li class-"pane5"»«img src-"../assets/img5.jpg" alt-""»«/li» 
«/ul» 
«/div» 
HTML 几乎 不 需要 变化 ， 唯 一 需要 注意 的 是 ， 由 于 贡 里 面 装 的 是 img 76035. df img 元 
素 本 身 是 可 以 被 拖 动 的 ， 因 此 我 们 需要 简单 处 理 一 下 : 
// 阻 止 图 片 本 身 的 可 拖 电 行为 
function Carousel (selector) { 


// 保 存 相册 的 应 用 ， 后 面 可 能 会 使 用 
var element = $element.get (0) 
var $element = $(selector) 


$('img', element).on('dragstart', function (e) ( 
e.preventDefault() 
) 


p 


为 了 区 分 ， 我 们 将 前 面 例子 中 的 handleHammer 处 理 函数 改名 为 handleSwitchImg， 代 
码 也 几乎 不 需要 动 ， 此 时 无 论 是 触摸 屏 还 是 在 桌面 浏览 器 上 ， 已 经 可 以 “ 拖 动 ”图 片 进 行 
切换 了 。 

此 时 最 重要 的 便 是 “浏览 模式 ” 进入 浏览 模式 需要 双击 〈 轻 触 两 次 )， 退 出 浏览 模式 
也 是 双击 ， 这 是 我 们 可 以 利用 hammer 提供 的 doubletap 事件 : 


function Carousel(selector) ( 


var hammerEl = Hammer (element) 
//zooming 用 来 指示 当前 是 否 进入 了 浏览 模式 
var zooming = false 
hammerEl.on('doubletap', function (e) ( 
//doubletap 事件 可 能 在 img 元 素 上 触发 ， 也 可 能 在 其 父 元 素 上 触发 
var img 
if (e.target.tagName === 'IMG') ( 
img = e.target 
} else ( 
img = $(e.target).find('img').get (0) 
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} 
// 轻 触 屏幕 两 次 将 图 片 放大 50% 并 进入 图 片 浏览 模式 
// 在 浏览 模式 下 ， 可 以 进行 拖 忠 移动 图 片 ，pinch 缩放 图 片 等 
ViewMode (img, !zooming) 
} 
f 


viewMode 函数 十 分 关键 ， 在 进入 浏览 模式 时 ， 我 们 需要 放大 图 片 并 禁用 掉 切换 图 片 
的 事件 绑 定 上 单独 操作 图 片 的 事件 处 理 代 码 ， 退 出 浏览 模式 时 则 相反 : 


function Carousel (selector) { 


// 这 些 值 依然 是 需要 初始 化 的 
// 默 认 让 图 片 放大 1.5 倍 
var posX = 0, posY = O0, 
scale = 1.5, rotation = 0, 
last scale, last rotation, 
last posX, last posY 
//$img 保存 当前 被 浏览 的 图 片 的 引用 
Var $img 
var zooming = false 
function viewMode (img, enable) ( 
$img = $(img) 
zooming = !zooming 
if (enable) { 
zoomImg (enable) 
// 进 入 浏览 模式 后 便 不 再 处 理 外 部 的 事件 
hammerEl 
.off("release dragleft dragright drag swipeleft swiperight", 
handleSwitchImg) 
.on('touch drag transform', handleImgTouch) 
else ( 
zoomImg (enable) 
hammerEl 
.off('touch drag transform', handleImgTouch) 
.on("release dragleft dragright drag swipeleft swiperight", 
handleSwitchImg) 
// 退 出 当前 图 片 的 浏览 模式 后 需要 重 置 这 些 预 设 值 
posX 0 
posY 0, 
scale = 1.5 
rotation = 0 
} 
} 
hammerEl.on('doubletap', function (e) (..] 


ji 
zoomImg 函数 的 代码 比较 简单 : 


function zoomImg (zoomin) { 

Simg.addClass('animate') 

if (zoomin) ( 
//transform 的 参数 要 写 齐 全 ， 否 则 浏览 器 无 法 知道 不 同 的 变换 属性 如 何 做 过 渡 
$img.css('transform', "translate3d(0, 0, 0) scale3d(1.5, 1.5, 0) 
rotate (0deg)") 

} else { 
$img.css('transform', 'translate3d(0, 0, 0) scale3d(1, 1, 0) 
rotate (0deg) ') 

} 


+a 
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// 后 面 touch 操作 会 改变 图 片 的 transform 属性 ,因此 我 们 需要 在 动画 放大 图 片 后 去 掉 animate 
Class 
// 这 个 操作 更 可 靠 的 方式 是 通过 监听 transitionEnd 事件 来 实现 
setTimeout(function () { 
S$img.removeClass ('animate') 
), 300) 
l 


handleImgTouch 事件 处 理 程序 和 前 面 倾斜 百度 logo 的 例子 基本 一 样 : 
function handleImgTouch(e) { 
$img.removeClass ('animate') 
e.stopPropagation() 
switch (e.type) ( 
case 'touch': 
Ge 'drag': 
GERE 'transform': 


) 


$img.css('transform', transform) 


} 

至 此 , 短 短 200 行 不 到 的 代码 就 实现 了 高 仿 的 iOS 相册 ,是 否 油 然而 生 一 种 成 就 感 呢 ? 
不 过 这 个 例子 还 不 够 完美 ， 相 比 与 原生 应 用 ， 我 们 的 carousel 组 件 至 少 还 有 这 些 地 方 可 以 
修缮 : 

口 doubletap 放大 时 应 该 按照 单 击 ( 轻 触 》 的 位 置 为 中 心 进行 放大 。 

口 浏览 模式 中 的 图 片 不 应 该 离开 可 触摸 区 域 〔 即 屏幕 ) 。 

口 双 指 缩放 时 应 该 设置 阔 值 (最 大 和 最 小 值 都 应 该 设置 ) 。 

O 为 了 图 片 浏览 更 可 控 ， 应 禁用 旋转 。 


开发 触摸 程序 的 一 大 门槛 在 于 相 比 于 桌面 开发 非常 难于 测试 。 基 于 触摸 屏 的 移动 设备 
的 交互 方式 和 桌面 电脑 的 交互 程序 有 非常 大 的 区 别 ， 而 作为 开发 者 几乎 都 是 在 桌面 电脑 上 
作 的 ， 因 此 要 高 保 真 的 实现 一 些 触摸 效果 ， 我 们 需要 借助 一 些 工 具 。 


1. Chrome 开发 者 工具 


不 得 不 说 ， 对 于 Web 开发 者 而 言 Chrome 自 带 的 开发 者 工具 无 疑 是 一 枚 神器 ， 不 仅 对 
于 可 以 模拟 多 种 设备 和 屏幕 尺寸 ,如 图 5.4 所 示 。 而 且 模拟 触摸 事件 也 不 在 话 下 ， 如 图 5.5 
所 示 。 

在 开启 模拟 触摸 事件 选项 的 情况 下 , 单 击 鼠 标 左 键 可 以 触发 touchstart 事件 , 按 住 鼠标 
拖 忠 则 会 发 出 touchmove 事件 ， 松 开 和 鼠标 则 会 触发 touchend 事件 。 

如 果 你 使 用 MAC 作为 开发 平台 ， 那 么 Xcode 还 自 带 一 个 iOS 设备 模拟 器 ， 你 可 以 
通过 : 
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Settings Oy Firefox 4 一 Mac 
Firefox 14 — Android Mobile 


Firefox 14 — Android Tablet 
[| Chrome — Android Mobile 


Overrides Chrome — Android Tablet 
«X iPhone — iOS 5 Mozilla/5.0 (iPhone; C 
iPad — iOS 5 
iPad — iOS 4 
Android 2.3 — Nexus S 
Android 4.0.2 — Galaxy Nexus 960 — 


BlackBerry — PlayBook 2.1 
BlackBerry — 9900 
BlackBerry — BB10 
MeeGo — Nokia N9 
Other... 


图 5.4 #5 useragent， 模 拟 不 同 设 备 


加 Emulate touch events 


图 5.5 模拟 触摸 事件 选项 
右键 点 击 Xcode 程序 包 -> Content -> Applications -> iPhone Simulator 


找到 并 打开 这 个 程序 ， 你 会 看 到 一 个 逼真 异常 的 Phone， 如 图 5.6 所 示 。 


27 
* 9 


Game Center 


Passbook 


图 5.6 iOS 模拟 器 
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这 个 模拟 器 可 以 模拟 苹果 公司 推出 的 几乎 全 系列 iOS 设备 , 以 及 常见 的 操作 , 单 击 “ 便 
件 ” 菜 单 可 看 到 多 种 设备 ， 如 图 5.7 所 示 。 


iPad (Retina) 
v iPhone 
iPhone (Retina 3. 
EIFE iPhone (Retina 4- 


REIRE VORH 
锁定 *L 


模拟 内 存 警告 

切换 呼叫 状态 栏 ”路 T 
D 模拟 硬件 键盘 

电视 输出 » 


图 5.7 模拟 多 种 设备 


模拟 器 自 带 了 Safari 浏览 器 ， 利 用 这 个 浏览 器 几乎 可 以 完成 绝 大 部 分 的 测试 工作 。 
Android 平台 也 有 自己 官方 的 模拟 器 (http://developer.android.com/tools/devices/ 
emulator.html)， 由 于 Android 平台 天 生 的 开放 性 和 多 样 性 ， 模 拟 器 和 最 终 真 机 的 效果 差距 


会 比较 大 。 


如 果 你 不 巧 没有 使 用 MAC 作为 开发 平台 ， 但 幸运 的 是 使 用 了 hammer 作为 开发 触 


摸 程序 的 
J= :1 fih : 


CRH, WA hammer 还 为 你 提供 了 两 个 供 调试 使 用 的 插件 ， 一 个 是 用 来 模拟 多 指 


<script src="path/to/plugins/hammer.fakemultitouch.js"></script> 


模拟 
实现 两 点 
另 


多 指点 触 主要 为 桌面 版 浏览 器 测试 提供 了 方便 , 可 以 按 住 Shift 键 并 同时 拖 忠 鼠标 
n. 


-个 插件 是 将 点 触 进行 可 视 化 (会 有 一 个 小 圆 点 ): 


<script src="../plugins/hammer.showtouches.js"></script> 


引入 


插件 后 别 忘 了 调用 各 自 启 用 的 方法 : 


Hammer.plugins.fakeMultitouch(); 
Hammer . plugins .showTouches () ; 


5.8 所 示 。 
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青 况 建议 同时 启用 两 个 插件 ， 最 后 在 桌面 浏览 器 上 显示 效果 可 能 是 这 样 的 ， 如 图 


图 5.8 hammer 插件 
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或 许 就 在 几 年 前 ， 大 家 都 还 没 想 过 未 来 某 一 天 GPS 等 技术 能 和 Web 技术 有 交集 ， 还 
是 得 再 度 感谢 乔布斯 一 一 iPhone 让 定位 变 得 如 此 稀 松 平常 。 


6.1 获取 当前 位 置 


获取 定位 信息 的 方式 有 很 多 种 ， 精 度 最 高 的 要 数 GPS 技术 了 ， 除 此 之 外 还 可 以 通过 基 
站 和 WiFi 热点 等 方式 来 获取 位 置 。 在 Web 上 ，Geolocation API (地理 位 置 应 用 程序 接口 》 
提供 了 准确 知道 浏览 器 用 户 当 前 位 置 的 功能 ， 而 且 封 装 了 获取 位 置 的 技术 细节 ， 开 发 者 不 
用 关心 位 置信 息 究 况 从 何 而 来 一 一 这 极 大 简化 了 应 用 的 开发 难度 。 

Geolocation API 的 使 用 非常 简单 ，navigator.geolocation 对 象 公 开 了 访问 地 理 位 置 的 方 
法 ， 检 测 浏览 器 是 否 支 持 定 位 API， 只 需要 检测 geolocation 是 否 存在 于 navigator 中 即 可 。 

对 于 应 用 开发 者 ， 大 多 数 情 况 只 需要 获取 用 户 的 当前 位 置 ， 此 时 我 们 可 以 使 用 
getCurrentPosition() 方 法 来 获取 当前 位 置 的 坐标 值 。 getCurrentPosition() 调 用 时 会 发 起 一 个 异 
步 请求 ， 浏 览 器 会 调用 系统 底层 的 硬件 (比如 GPS)〉 来 更 新 当前 的 位 置信 息 ， 当 信息 获取 
到 之 后 会 在 回调 函数 中 传 入 position 对 象 。 

position 对 象 包含 两 个 属性 ， 一 个 是 coords， 它 是 一 个 Coordinates 对 象 ， 包 含 当前 位 
置信 息 ; 一 个 是 tmestamp， 表 示 获 取 到 位 置 的 时 间 戳 。 

Coordinates 对 象 包含 包括 经 纬度 在 内 的 一 系列 信息 ， 如 下 所 示 。 
latitude: 一 个 十 进 制 表 示 的 维度 坐标 。 
longitude: 一 个 十 进 制 表示 的 经 度 坐 标 。 
altitude: 海拔 高 度 〈 以 米 为 单位 ， 如 果 是 S， 表 示 精 确 到 5 米 范 围 ) 。 
accuracy: 当前 经 纬度 信息 的 精度 〈 同 样 以 米 为 单位 ) 。 
altitudeAccuracy: 当前 海拔 高 度 的 精度 。 
heading: 代表 当前 设备 的 朝向 ， 该 值 是 以 弧度 为 单位 ， 指 示 了 按 顺 时 针 方 向 相对 
于 正 北 的 度数 〈 比 如 heading 为 270 的 时 候 表示 正 西方 ) 。 

getCurrentPosition 还 可 以 传 入 另 一 个 回调 函数 作为 参数 以 处 理 错误 情况 ， 如 下 所 示 。 

由 于 地 理 位 置 属 于 高 度 敏 感 的 用 户 隐 私 ， 因 此 getCurrentPosition 函数 在 被 调用 时 ， 浏 
览 器 会 询问 用 户 是 否 允 许 当前 页 面 访问 自己 的 位 置信 息 ， 在 Chrome 上 的 提示 可 能 是 这 样 
的 ， 如 图 6.1 所 示 。 

获取 到 用 户 权限 后 , Chrome 会 在 地 址 栏 增加 一 个 表示 地 理 位 置 的 图 标 , 如 图 6.2 所 示 。 

如 果 用 户 拒绝 网 站 使 用 位 置信 息 ， 那 么 传 入 getCurrentPosition 的 第 二 个 回调 函数 会 得 
到 一 个 PositionError 错误 对 象 ， 你 可 以 像 这 样 处 理 它 : PositionError 对 象 只 包含 code 和 
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message 两 个 属性 。 前 者 表示 错误 码 ，1 是 用 户 拒绝 了 许可 (permission denied), 2 是 当前 
位 置 不 可 用 ，3 是 获取 位 置 超时 (timeout). message 属性 是 一 条 供 人 类 阅读 的 错误 消息 。 


E 


EIS 个 iocalhosrsooo/ch4/gec x 国 首 页 - e x 
€ -— C fi R localhost:8000/ch4/geol.. 77 © 3 D 9) = 


© localhost:8000 想 要 使 用 您 的 计算 机 的 所 在 位 置信 息 。 ”| 拒绝 | | 允许 | x 


图 6.1 地 理 位 置 访问 控制 


J)/ch4/geol. x \ \ YW 


iost:8000/ch4/geol.html ©® y? 


图 6.2 Chrome 在 用 户 允 许 获 取 地 理 位 置 时 


来 看 一 个 略 显 完整 的 获取 和 处 理 位 置信 息 的 程序 ， 如 下 所 示 。 
最 终结 果 如 图 6.3 所 示 。 


€ — CQ fi [localhost:8000/ch4/geo1.html 


| — . 


当前 纬 经 度 : 116° 
rp P mde 国境 内 


图 6.3 获取 当前 位 置 


getCurrentPosition() 函 数 的 回调 时 机 和 并 非 一 定 的 ， 这 依赖 于 设备 获取 位 置 时 间 的 长 
短 。 一 般 情况 下 它 会 尝试 尽 可 能 快 的 返回 一 个 结果 ， 通 常 这 个 结果 的 精度 都 不 是 特别 高 ， 
这 种 低 精度 的 数据 可 能 来 源 于 设备 的 IP 地 址 或 者 WiFi。 如 果 设 备 拥 有 GPS 模块 ， 那 么 可 
能 会 消耗 较 长 时 间 去 获取 一 个 精确 的 位 置 ， 要 控制 这 一 点 ， 可 以 通过 传递 PositionOptions 
对 象 给 getCurrentPosition 的 第 三 个 参数 来 做 到 。 

PositionOptions 可 以 有 三 个 选项 , enableHighAccuracy 为 true 将 会 让 设备 尝试 高 精度 定 
位 方式 (比如 GPS)， 这 时 设备 的 耗 电 量 和 获取 位 置 的 耗 时 都 可 能 会 增加 ， 对 移动 设备 而 
言 是 一 个 较 大 的 压力 ， 如 果 你 的 应 用 不 需要 太 精 确 的 数据 , 将 该 选项 设置 为 false 会 省 时 省 
电 许 多 。timeout 是 超时 时 间 ， 以 毫秒 计 ， 默 认 情况 下 timeout 的 值 是 Infinity 的 。maximum 
指示 了 获取 到 的 位 置 的 缓存 时 间 〈 以 毫秒 计 )， 如 果 设 置 为 0， 每 次 调用 getCurrentPosition 
都 会 调用 底层 设备 去 获取 真实 位 置 ， 合 理 的 maximum 时 间 可 以 降低 获取 真实 位 置 的 开销 ， 
省 时 省 电 , 比如 你 在 步行 的 时 候 , 10 秒 钟 时 间 其 实 是 走 不 了 多 远 的 ,这 时 候 可 以 将 maximum 
设置 为 10000。 
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6.2 ”监视 位 置 变 化 


getCurrentPosition 只 在 调用 时 会 得 到 位 置信 息 ， 在 LBS 应 用 中 ， 监 测 用 户 位 置 变化 是 
非常 常见 的 需求 。 一 个 做 法 是 通过 轮 询 的 方式 去 检测 位 置 变化 。 

我 们 设置 了 一 个 10 秒 作 为 获取 位 置 的 间隔 ， 这 样 做 的 缺点 很 明显 ， 首 先 你 无 法 知道 
用 户 动 态 的 速度 ， 如 果 在 飞机 火车 上 ，10 秒 可 能 已 经 走 了 很 长 一 段 距离 ， 这 样 提 供给 用 户 
的 位 置信 息 可 能 是 延迟 的 ， 如 果 我 们 将 间隔 设置 的 很 得， 又 会 非常 耗 电 耗 能 ， 如 果 用 户 长 
时 间 没 有 动 ， 那 这 些 查 询 都 是 无 用 的 。 

还 好 ， 我 们 有 watchPosition() 方 法 ， 可 以 让 系统 通知 我 们 用 户 的 位 置 发 生 了 变化 〈 或 
者 有 新 的 精度 更 高 的 位 置信 息 )。 

watchPosition() 方法 和 getCurrentPosition 方法 在 调用 上 类 似 ， 但 其 行为 与 
getCurrentPosition 的 区 别 也 是 显而易见 的 一 一 回调 函数 有 可 能 被 执行 多 次 。 调 用 该 函数 时 
会 返回 一 个 watch ID， 这 个 ID 和 setInterval0 函 数 返 回 的 ID 类 似 ， 可 以 用 于 清除 这 次 监视 
操作 。 

watchPosition() 方 法 也 接受 相同 的 三 个 参数 ,success、error 回 调 以 及 一 个 PositionOptions 
对 象 。 

有 了 watchPosition， 我 们 甚至 可 以 写 一 些 有 趣 的 东西 ， 比 如 寻宝 游戏 等 。 


6.3 来 半 斤 Google maps ZZ 


前 面 介绍 了 定位 API 的 基本 内 容 后 , 你 也 能 发 现 仅仅 利用 这 些 API 能 做 的 事情 非常 有 
限 ， 我 们 的 寻宝 游戏 也 异常 无 聊 。 

定位 API 更 大 的 价值 在 于 与 GIS (Geographic Information System， 地 理 信 息 系 统 ) 的 
结合 。 首 先 我 们 得 有 一 个 地 图 的 数据 库 ， 想 要 徒手 创造 这 个 数据 库 的 幻想 家 们 可 以 先 省 省 
了 一 一 如 果 你 买 不 起 卫星 的 话 。 

还 好 我 们 有 Google maps。 

Google maps 可 以 说 是 Web 地 图 的 开创 者 ， 地 图 、 导 航 、 地 球 和 街景 …… 它 一 次 又 一 
次 带 给 我 们 的 巨大 惊喜 也 不 必 多 说 了 ， 更 重要 的 是 它 提供 了 许多 API 供 开发 者 使 用 ， 开 发 
者 可 以 利用 Google 提供 的 API 创造 出 更 多 有 趣 有 用 的 玩意 儿 。 

最 简单 的 是 要 数 Static Maps API T, 它 使 用 特定 url 动态 生成 一 张 地 图 图 片 ,， 比如 (来 
自 官方 API 的 例子 )。 

这 张 地 址 将 链接 到 一 张 600X300 的 图 片 , 包含 纽约 市 的 静态 地 图 图 片 , 如 图 6.4 所 示 。 

可 以 看 到 , static api 可 以 定义 一 系列 的 参数 , 以 下 是 来 自 Google 文档 中 的 参数 说 明 ( 更 
多 详情 请 参考 google maps 的 APD. 


1. 位 置 参数 
O center (标记 不 显示 时 为 必 填 ) ， 用 于 定义 地 图 的 中 心 ， 该 中 心 与 地 图 各 边缘 的 距 
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离 都 相等 。 此 参数 用 以 英文 逗号 分 隔 的 {纬度 ,经 度 } 对 (例如 
*40.714728,-73.998672" ) 或 者 字符 串 地 址 (例如 “city hall, new york, ny”) 表示 
位 置 ， 来 标识 地 球 表面 某 个 独一无二 的 位 置 。 


Eid 
EET Square Park 


图 6.4 static api 


zoom《 标 记 不 显示 时 为 必 填 ) ， 用 于 定义 地 图 的 缩放 级 别 ， 该 级 别 可 决定 地 图 的 
放大 级 别 。 此 参数 采用 的 数字 值 与 所 需 的 区 域 缩放 级 别 相符 。 


2. 地 图 参数 


3210 


size CH) ， 用 于 定义 地 图 图 片 的 矩形 尺寸 。 该 参数 采用 (horizontal value)x 
Ívertical value) 形式 的 字符 串 。 例 如 ，500X400 定义 了 一 张 宽 为 500 像素 和 高 为 
400 像素 的 地 图 。 宽 度 小 于 180 像素 的 地 图 会 显示 一 个 缩小 的 Google 微 标 。 该 参 
数 会 受到 下 述 scale 参数 的 影响 ， 而 最 终 输出 大 小 会 是 大 小 值 和 比例 值 的 结果 。 
scale( 可 选 ), 用 于 影响 返回 的 像素 数 。scale=2 的 覆盖 区 域 和 细节 等 级 都 与 scale=1 
的 相同 ( 即 地 图 的 内 容 不 变 ) ,但 返回 的 像素 数 是 后 者 的 两 倍 。 此 参数 可 用 于 针 
对 高 分 辨 率 显示 器 进行 开发 或 生成 用 于 打印 的 地 图 , 默认 值 为 1. 接受 的 值 包括 2 
和 4 (4 只 供 Maps API for Business 客户 使 用 ) 。 

format( 可 选 ) ， 用 于 定义 生成 的 图 片 的 格式 。 默 认 情况 下 ，Static Maps API 会 创 
建 PNG 图 片 。 有 多 种 可 用 格式 供 你 选择 ， 其 中 包括 GIF、JPEG 和 PNG 类 型 。 
使 用 哪 种 格式 取决 于 你 希望 以 什么 方式 显示 图 片 。 通常, JPEG 可 提供 更 大 的 压缩 
Z, mi GIF 和 PNG 可 提供 更 多 细节 。 

maptype CHI3E) , ， 用 于 定义 要 构建 的 地 图 类 型 。maptype 有 多 个 可 能 的 值 ， 其 中 
包括 roadmap. satellite, hybrid 和 terrain. 

language CHE) , ， 用 于 定义 在 地 图 图 块 上 显示 标签 时 所 用 的 语言 。 请 注意 ， 该 参 
数 仅 支 持 部 分 国家 /地 区 图 块 ， 如 果 图 块 集 不 支持 请 求 的 特定 语言 ， 则 将 使 用 默认 
语言 。 

region〔 可 选 ) ， 用 于 基于 地 理 政治 敏感 性 定义 要 显示 的 适当 界线 。 该 参数 接受 指 
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EH ccTLD 〈“ 项 级 域 ”) 双 字 符 值 的 区 域 代码 。 


.地 图 项 参数 


markers( 可 选 ) ， 用 于 定义 一 个 或 多 个 要 附 在 指定 地 点 的 图 片上 的 标记 。 此 参数 
采用 由 竖 线 字符 () 分 隔 其 中 参数 的 单个 标记 定义 字符 串 。 多 个 样式 相同 的 标记 可 
以 放 在 同一 个 markers 参数 中 ; 内需 另外 添加 markers. 参数 即 可 添加 其 他 不 同样 
式 的 标记 。 请 注意 , 如 果 是 为 地 图 提供 标记 , 就 无 需 指 定 center 和 zoom 参数 ( 通 
常 为 必 填 ) 。 

path( 可 选 ) ， 用 于 定义 指向 指定 位 置 图 片上 合 加 层 的 两 个 或 多 个 连接 点 的 单条 路 
径 。 此 参数 采用 由 竖 线 字符 (|) 分 隔 的 点 定义 字符 串 。 你 可 以 通过 另外 添加 path 
参数 来 提供 其 他 路 径 。 请 注意 ， 如 果 是 为 地 图 提供 标记 ， 就 无 需 指定 center 和 
zoom 参数 〈 通 常 为 必 填 ) 。 

visible〈 可 选 ) ， 用 于 指定 一 个 或 多 个 即使 在 不 显示 标记 或 其 他 指示 器 的 情况 下 也 
应 出 现在 地 图 上 的 位 置 。 使 用 此 参数 可 确保 在 静态 地 图 上 显示 某 些 地 图 项 或 地 图 
位 置 。 

style〈 可 选 ) ， 用 于 定义 自 定 义 样式 ， 以 更 改 地 图 上 特定 地 图 项 〈 如 道路 和 公园 
等 ) 的 显示 方式 。 此 参数 采用 feature 和 element 参数 ， 以 分 别 标识 要 选择 的 地 图 
项 和 一 组 要 应 用 于 该 选择 项 的 样式 操作 。 你 可 以 通过 另外 添加 style 参数 来 提供 多 
个 样式 。 


4. 报告 参数 


口 


sensor〈 必 填 ) ， 用 于 指定 请 求 静态 地 图 的 应 用 是 否 会 使 用 传感器 来 确定 用 户 所 处 
位 置 。 所 有 静态 地 图 请 求 都 需要 使 用 此 参数 。 


结合 该 API， 我 们 可 以 增强 之 前 查找 自己 位 置 的 程序 ， 为 自己 所 在 的 位 置 绘制 一 副 地 
并 打上 标记 。 
这 样 会 得 到 一 幅 300X300 的 地 图 图 片 ， 如 图 6.5 所 示 。 


| 查找 我 的 位 杆 


当前 位 置 : 
北 维 39.906* 
东经 116.391" 


图 6.5 ”静态 地 图 
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static api 提供 了 许多 功能 ， 自 定义 地 图 样式 、 自 定义 标记 、 路 径 和 区 域 等 。 虽 然 功 能 
多 多 ， 但 毕竟 是 静态 地 图 :既然 是 静态 的 ， 那 必然 不 够 动感 。 

要 将 更 动感 的 更 炫 酷 的 JavaScript 版 Google maps 带 入 你 应 用 也 不 是 一 件 难事 儿 。 引 入 
Google maps 依然 只 需 一 步 。 

引入 Google maps 的 api 后 ， 你 便 可 以 自由 使 用 这 些 ，Google maps 的 JavaScript 版 本 
API 同样 包含 许多 内 容 ， 而 且 和 static api 也 非常 类 似 ， 只 不 过 使 用 起 来 更 加 直观 。 

此 时 再 打开 网 页 ， 你 会 发 现 网 页 已 经 摇身一变 成 为 了 功能 齐备 且 在 移动 端 也 体验 不 俗 
的 Google 地 图 ， 如 图 6.6 和 图 6.7 所 示 。 


Ondomp x 


€ > Q fi [!localhost:8000/ch4/geo google2.html S7 3 = 


图 6.7 简单 的 地 图 GPhone Safari， 支 持 多 点 ) 


«2p 


第 6 章 ”地理 定 位 (Geolocation API) 


此 时 你 要 改编 之 前 的 定位 例子 也 简单 了 ， 完 整 程序 如 下 : 


if ("geolocation" in navigator) { 
/* geolocation 可 用 */ 
) else { 
/* geolocation 不 可 用 */ 
) 
navigator.geolocation.getCurrentPosition(function(position) ( 
/ /position 对 象 包含 经 纬度 坐标 
doSomething(position.coords.latitude, position.coords.longitude) 
}) 
navigator.geolocation.getCurrentPosition(function(position) ( 
doSomething (position) 
), function(err)( 
console.log (err) 


) 


function errorCallback(error) ( 
console.log('ERROR(' + error.code + '): ' + error.message); 
E 
<button id="findMe"> 查 找 我 的 位 置 </button> 
«div id="output"></div> 
<script> 
function geoFindMe() ( 
var output = document.getElementById('output'); 
if (!navigator.geolocation)(í 
output.innerHTML = '<p> 当 前 浏览 器 不 支持 地 理 位 置 查询 ! ! «/p»'; 
return; 
) 
function success(position) ( 
var latitude - Math.round(position.coords.latitude) 
var longitude = Math.round(position.coords.longitude) 
var html = ' 当 前 纬度 : ' + latitude + '?, 经 度 : ' + longitude + '? <br> ' 
if (latitude » 4 && latitude « 53 && longitude » 73 && longitude « 135) ( 
html += “您 现在 极 有 可 能 在 中 国境 内 " 
) else ( 
html += “您 现在 极 有 可 能 不 在 中 国境 内 " 
) 
output.innerHTML - html 
) 
function error(err) ( 
output.innerHTML = "获取 位 置 时 发 生 错误 ， 原 因 : ' + err.message 
output .innerHTML = “' 正 在 获取 位 置 中 . . ." 
navigator.geolocation.getCurrentPosition(success, error) 
) 
document.getElementById('findMe').addEventListener('click', function (e) ( 
geoFindMe() 
}) 
</script> 
var options = { 
enableHighAccuracy: true, 
timeout: 5000, 
maximumAge: 0 
} 
navigator.geolocation.getCurrentPosition(success, error, options) 
setInterval (function(){ 
navigator.geolocation.getCurrentPosition(success, error, options) 
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), 10000) 

navigator.geolocation.watchPosition(function(position) { 
doSomething(position.coords.latitude, position.coords.longitude); 

D; 

var watchlId = navigator.geolocation.watchPosition(function() (..]) 

navigator.geolocation.clearWatch (watchId) 

<script> 

var wid, target, option 


function success (pos) { 
var crd = pos.coords 
// 保 留 三 位 小 数 
if (target.latitude === +crd.latitude.toFixed (3) 
&& target.longitude === +crd.longitude.toFixed(3)) { 
alert. log (‘FMRI f KEA! 抬头 看 看 城楼 的 靓 照 吧 ! ') 
navigator.geolocation.clearWatch (wid) 
H 
5 


function error(err) ( 
console.warn('ERROR(' + err.code + '): ' + err.message) 


J 


// 宝 藏 在 某 广场 附近 
target = ( 
latitude 
longitude 
) 


39.906, 
116.391, 


options = ( 
enableHighAccuracy: false, 
timeout: 5000, 
maximumAge: 0 


) 


wid = navigator.geolocation.watchPosition(success, error, options) 
</script> 

<img src=" http://maps.googleapis.com/maps/api/staticmap?center- 
Brooklyn+Bridge, New+York,NY&zoom=13&size=600x300&maptype=roadmap 


&markers-color:blue$7Clabel:S$7C40.702147,-74.015794&markers-color:green 


$7Clabel:G$7C40.711614,-74.012318 


&markers-color:red$7Ccolor:red$7Clabel:C$7C40.718217,-73.998284&sensor- 


false" /» 
<button id="findMe"> 查 找 我 的 位 置 </button> 
<div id="output"></div> 
<script> 
function geoFindMe() { 
var output = document.getElementById('output'); 
if (!navigator.geolocation)( 
output.innerHTML = '<p> 当 前 浏览 器 不 支持 地 理 位 置 查询 ! ! </p>'; 
return; 
function success(position) { 
var latitude = position.coords.latitude 
var longitude position.coords.longitude 
latText = latitude >= 0 ? "Jk" :>“ 南 " 
lonText = longitude >= 0 ? 'Zk' : 'pü' 


output.innerHTML = ' 当前 位 置 : «br» ' + latText + ' 维 ' + Math.abs (latitude) 
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0 TF 
lonText + ' 经 ' + Math.abs (longitude) + '?«/p»' 


var img = new Image() 

img.src — 'http://maps.googleapis.com/maps/api/staticmap?center-' 
+ latitude + ',' + longitude 
+ '&zoom-13&size-300x300&sensor-false&markers-' 
+ latitude + ',' + longitude 


output.appendChild (img) 
) 
function error(err) ( 

output.innerHTML - 'Unable to retrieve your location' 
} 
output.innerHTML = '<p>Locating..</p>' 
navigator.geolocation.getCurrentPosition(success, error) 


document.getElementById('findMe').addEventListener('click', function (e) ( 


geoFindMe () 


)) 

«/script» 

<script type-"text/javascript" src-"http://maps.google.com/maps/api/js? 
sensor-true"»«/script» 

<!DOCTYPE html» 

«html» 

«head» 


«title»hello map</title> 
«meta name-"viewport" content-"initial-scale-1.0, user-scalable-no"» 
«meta charset-"utf-8"» 
<style> 
html, body, #map-canvas { 
margin: 0; 
padding: 0; 
/* 让 地 图 默认 充斥 你 的 页 面 */ 
height: 100%; 


) 
</style> 


</head> 
<body> 


<div id="map-canvas"></div> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 
<script> 
function initialize() ( 
var mapOptions - ( 
// 缩 放 级 别 
zoom: 8, 
//google.maps.LatLng 代表 着 地 球 上 的 一 个 点 ， 传 入 经 纬度 构建 
// 通 过 cente 将 地 图 中 心 设 为 指定 的 点 
center: new google.maps.LatLng(39.906, 116.391), 
//ROADMAP 是 最 基本 的 地 图 类 型 ， 包 含 二 维 道路 等 内 容 
// 此 外 还 有 卫星 图 和 地 形 图 等 类 型 
mapTypeld: google.maps.MapTypeld.ROADMAP 
$ 
// 调 用 google.maps .Map 构造 一 个 地 图 实例 
var map = new google.maps.Map (document.getElementById ('map-canvas'), 
mapOptions) 
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initialize() 
</script> 
</body> 
</html> 
<span id="status"> 查 找 中 ..</span></p> 
<div id="map-container"></div> 
<script type-"text/javascript" src-"http://maps.google.com/maps/api/js? 
sensor-true"»«/script^» 
«script» 
var s = document.getElementById('status') 
function success(position) { 


s.innerHTML = "找到 你 在 哪儿 了 ! ' 
//Google 的 地 图 是 绘制 在 一 个 容器 元 素 里 的 


var mapcanvas = document.createElement ('div') 
mapcanvas.id = 'mapcanvas' 
mapcanvas.style.height - '300px' 
mapcanvas.style.width = '300px' 


document.getElementById ('map-container').appendChild (mapcanvas) 


var latlng = new google.maps.LatLng(position.coords.latitude, position 
-coords.longitude) 
var options - ( 
zoom: 15, 
center: latlng, 
mapTypeControl: false, 
navigationControlOptions: (style: google.maps.NavigationControlStyle 
.SMALL), 
mapTypeld: google.maps.MapTypeld.ROADMAP 
) 


var map = new google.maps .Map (mapcanvas, options) 
//google.maps.Marker 用 于 构造 地 图 标记 
var marker = new google.maps.Marker ({ 
position: latlng, 
map: map, 
title:" 你 在 这 里 ! (精确 到 "+ position.coords.accuracy + "KD" 
} 
) 


function error (msg) ( 
s.innerHTML = typeof msg == 'string' ? msg : "定位 失败 ! " 
) 


if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(success, error) 
) else ( 
error ('" 您 的 浏览 器 不 支持 定位 ! T) 
} 
«/script» 


Google maps 还 包含 非常 多 的 内 容 ， 如 图 层 、 地 图 事件 和 控件 等 等 。 园 于 篇 幅 所 限 本 
书 无 法 一 一 为 读者 讲解 它们 , 如 果 读 者 有 兴趣 可 以 参考 Google 提供 的 教程 以 及 文档 或 者 购 
买 其 他 讲解 Google maps 的 书籍 进行 学 习 。 
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6.4 开发 者 工具 


由 于 定位 API 非常 简单 ， 所 以 问题 就 只 剩 下 了 如 何 模拟 定位 行为 。 伟 大 的 Chrome JT 
发 者 工具 早已 为 我 们 想到 了 这 些 ， 模 拟定 位 只 需 一 次 勾 选 ， 如 图 6.8 所 示 。 


加 Override Geolocation 


Geolocation Position: Lat — 39.906 , Lon = 116.391 


O Emulate position unavailable 


图 6.8 模拟 定位 


读者 可 以 看 到 ， 不 仅 可 以 模拟 特定 坐标 ， 还 可 以 模拟 定位 出 错 的 情况 ， 这 样 ， 你 也 能 
轻松 的 到 世界 各 地 走 一 走 了 ! 


sis 
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JavaScript 在 过 去 有 非常 多 的 瓶颈 : 浏览 器 兼容 性 、 可 访问 性 和 性 能 …… 这 些 无 一 不 制 
约 着 开发 者 发 挥 他 们 的 想象 力 。 随 着 JavaScript 语言 能 力 被 挖掘 、 基 础 库 或 框架 的 涌现 以 
及 浏览 器 技术 (V8) 的 进步 ， 这 些 限 制 瓶颈 已 经 不 再 那么 恼人 。 而 依然 在 制约 JavaScript 
的 ， 是 JavaScript 本 身 。 


7.1 单线 程 语言 之 殉 


众所周知 ，JavaScript 是 一 门 基 于 事件 驱动 的 语言 ， 它 运行 在 单线 程 环境 里 , 无 法 创建 
进程 或 者 线程 ， 而 且 脚本 在 执行 时 会 阻塞 包括 UI 在 内 的 其 他 一 切 程 序 。JavaScript 不 具备 
真正 的 并 行 能 力 ， 即 便 是 看 起 来 “并 行 ” 的 setTimeoutO0 和 setInterval0 函 数 ， 其 运行 方式 
也 只 是 由 后 台 引 擎 以 “代码 插入 ”的 方式 进行 回调 ， 这 意味 着 像 setInterval0 这 样 的 间隔 函 
数 并 不 能 在 准确 的 间隔 内 执行 代码 。 

为 了 减少 阻塞 执行 这 一 问题 对 UI 操作 带 来 的 影响 ， 程 序 员 们 会 选择 将 脚本 放 入 body 
结束 标记 之 前 执行 , 即便 如 此 脚本 执行 时 也 会 有 浏览 器 带 来 的 限制 (Safari 是 5 fb, FireFox 
是 10 秒 )。 而 且 你 无 法 容忍 脚本 运行 长 达 5 秒 一 一 用 户 可 受 不 了 五 秒 钟 喻 事 儿 不 做 干 瞪眼 。 
事实 上 有 研究 表明 界面 响应 时 间 不 超过 100ms 是 最 理想 的 ， 一 旦 超过 这 个 时 间 ， 用 户 就 会 
感觉 自己 与 程序 界面 失去 了 联系 ， 此 时 用 户 会 倾向 于 重复 操作 〈 想 想 那 些 恼 人 的 “请 不 要 
重复 提交 表单 ”的 提示 吧 )。 

因此 在 脚本 执行 时 间 较 长 时 ， 程 序 员 们 发 明了 各 种 方式 来 解决 UI 线程 被 阻塞 的 问题 ， 
使 用 定时 器 和 数组 对 任务 进行 异步 处 理 是 其 中 一 种 ， 比 如 在 线性 处 理 某 一 系列 任务 时 ， 可 
能 会 写 出 这 样 的 代码 : 

<script> 

var todos = [..] 

for (var i = 0; i « todos.length; i++) ( 

process (todos [il) 

UP 

这 样 的 代码 在 执行 时 会 完全 阻塞 执行 ， 在 我 们 不 需要 立马 得 到 处 理 结果 时 ， 改 用 
setTimeout() 来 将 任务 与 UI 线程 重 绘 重 排 以 及 接受 用 户 输入 的 过 程 交错 开 来 执行 ， 已 获得 
响应 时 间 的 提升 : 

<script> 


var todos = [..] 
setTimeout (function () { 


// 取 出 todos 的 第 一 个 元 素 进行 执行 
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process (todos.shift()) 
// 如 果 还 有 需要 处 理 的 元 素 ，25ms 后 再 处 理 ， 给 UI 线程 留 一 点 喘息 的 时 间 
if (todos.length > 0) ( 
setTimeout (arguments.callee, 25) 
} else ( 
doneCallback() 
} 
m 
«/script» 


这 种 处 理 数组 的 模式 也 可 以 用 来 分 割 具体 任务 ， 比 如 我 们 可 能 会 有 保存 一 个 文档 这 样 
的 任务 ， 它 会 存在 好 儿 个 子 任务 : 
<script> 
function saveDocument (docId) { 
openDocument (docId) 
changeDocument (docId) 
closeDocument (docId) 
updateUI () 


) 
«/script» 


几 个 子 任务 连续 执行 可 能 会 消耗 比较 长 的 时 间 ， 利 用 上 面 的 模式 我 们 可 以 改写 成 
这 样 : 

<script> 

function saveDocument (docId) ( 


var tasks - [openDocument, changeDocument, closeDocument, updateUI] 
setTimeout(function () ( 
var nextTask - tasks.shift() 
nextTask (docId) 
if (tasks.length) ( 
setTimeout (arguments.callee, 25) 
) 
} 
) 
</script> 


这 种 模式 你 也 可 以 写成 更 加 通用 的 模式 ， 不 过 这 种 处 理 任务 的 方式 虽然 解放 了 用 户 界 
面 ， 但 却 拉 长 了 任务 执行 所 需要 的 时 间 ， 但 在 大 多 数 情况 下 是 值得 的 ， 因 为 对 于 Web 程序 
而 言 保 证 用 户 界面 时 刻 可 操作 通常 是 最 高 优先 级 的 事情 。 

即便 有 这 些 技巧 缓解 这 些 问 题 ， 但 这 种 线程 上 面 的 限制 使 得 JavaScript 并 不 适合 用 来 
处 理 耗 时 任务 。 


7.2 为 JavaScript 引入 线程 技术 


Web Worker 技术 最 初 是 HTML 5 标准 的 一 部 分 ， 后 来 分 离 出 去 成 为 了 独立 的 规范 
Chttp://www.w3.org/TR/workers/), Web Worker 提供 了 一 个 接口 ， 该 接口 提供 了 一 种 创建 独 
立 线 程 的 方式 ， 这 样 你 可 以 在 后 台 运 行 代码 而 不 影响 UI 线程 : 


Var myWorker = new Worker ("worker.js"); 


创建 Worker 很 简单 ， 调 用 Worker 构造 函数 并 传 入 一 个 js 文件 的 路 径 即 可 ， 创 建 好 
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Worker 后 该 js 文件 的 代码 将 开始 在 Worker 的 线程 号 


Ih AAT. Worker 和 调用 方 可 以 通过 


message 事件 和 postMessage 方法 进行 通信 ， 比 如 Worker 的 代码 可 


// 在 worker.js 中 可 以 做 一 些 耗 时 操作 

var num = 0 

for (var i = 0; 3 «€ 3007 3-5) 
num += i 


) 


能 是 这 样 : 


//postMessage 将 把 数据 传递 到 调用 Worker 的 地 方 


postMessage (num) 


在 主线 程 里 你 可 以 绑 定 Window 的 message 事件 以 监听 从 Worker 传 过 来 的 数据 


<script> 
var myWorker 


new Worker ("worker.js"); 


myWorker.addEventListener('message', function (e) ( 


console.log(e.data); //4950 
), false); 
</script> 


当然 在 主线 程 里 也 可 以 调用 Worker 的 postMessage 方法 , 同时 在 workerjs 里 也 可 以 绑 


定 message 事件 (使 用 onmessage?: 


<script> 

var myWorker new Worker ("worker.js"); 
myWorker.postMessage('hi worker'); 
</script> 


worker.js: 


addEventListener('message', function (e) ( 


// 这 里 接受 主线 程 传 过 来 的 数据 
e.data; //hi worker 
false); 


H 


熟悉 JavaScript 的 人 都 知道 ，JavaScript 执行 时 会 


有 一 个 全 局 环境 ， 其 中 可 能 包含 一 个 


或 多 个 全 局 变量 。 在 浏览 器 中 全 局 对 象 是 Window 对 象 ， 通 过 这 个 对 象 可 以 访问 DOM 和 
BOM 等 各 种 接口 ，Worker 线程 的 环境 很 特殊 ， 和 调用 Worker 的 浏览 器 执行 环境 不 完全 相 
同 ， 基 本 上 是 一 个 Window 对 象 的 阁 制 版 ， 你 可 以 通过 self (或 者 this) 而 不 是 Window 来 


进行 显 式 访问 这 个 全 局 对 象 : 
// 在 worker.js 中 可 以 做 一 些 耗 时 操作 
var num = 0 
for (var i = 0; i < 100; i++) { 

num += i 

) 
this.postMessage('first msg'); 
self.addEventListener('message', 


function (e) ( 


//hi worker, 4950 


// 这 里 接受 主线 程 传 过 来 的 数据 
self.postMessage(e.data + ', ' + num) 

}, false); 

在 Worker 执行 环境 里 内 只 有 下 列 功能 或 对 象 可 以 访问 。 


口 navigator 对 象 : 只 有 appNmae、appVersion、userAgent 和 platform 这 四 


性 可 以 访问 。 
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location 对 象 : 所 有 属性 与 window.location 相同 , 只 不 过 这 些 属 性 全 部 都 是 只 读 的 。 
XMLHttpRequest 对 象 : Worker 里 可 以 自由 进行 ajax 请 求 ， 后 台 处 理 大 量 来 自 服 
务 器 的 数据 也 是 非常 常见 的 需求 。 

setTimeout()/clearTimeout() 和 setImtervalO/clearImmterval0 两 组 函数 。 

ECMAScript 内 置 对 象 ， 比 如 Object, Date 和 Array 等 。 

一 个 importScripts 方法 ， 可 以 用 来 导入 外 部 JS 脚本 。 

应 用 缓存 ，applicationCache 对 象 。 

Worker 构造 函数 ， 以 继续 生成 子 worker 线程 (Chrome 目前 并 不 支持 ) 。 

相 较 于 浏览 器 文档 环境 ，Worker 不 能 访问 下 面 这 些 部 分 : 

口 DOM 的 全 部 内 容 ， 因 为 DOM 并 不 是 线程 安全 的 资源 。 

口 document 对 象 (和 DOM 有 交集 ) 。 

口 window 对 象 的 其 他 属性 。 

了 解 到 Web Worker 的 限制 ， 就 能 进一步 理解 前 面 的 Worker 是 如 何 工 作 的 。 

Worker 与 主线 程 传递 消息 〈 或 数据 ) 的 过 程 是 后 台 任 务 处 理 中 非常 重要 的 一 步 ， 
postMessage 方法 承担 着 主线 程 和 Worker 传递 消息 全 部 的 责任 。 前 面 的 例子 中 我 们 传递 的 
是 字符 串 数据 ， 要 注意 的 是 ,在 主线 程 和 Worker 线程 传递 的 消息 是 复制 的 ， 这 意味 着 你 只 
能 传递 可 以 被 序列 化 的 数据 (比如 JSON 对 象 )， 而 不 能 传递 普通 JavaScript 对 象 : 

var msg = ('cmd': 'start', 'content': 'Hi'} 

worker.postMessage (msg); 

对 于 上 面 的 例子 ，msg 对 象 在 传递 给 Worker 时 浏览 器 会 先 对 msg 进行 序列 化 
(JSON.stringify)， 在 Worker 里 面 接收 到 该 消息 时 ， 会 先进 行 反 序列 化 ， 之 后 再 传递 给 消 
息 事 件 对 象 (MessageEvent)。 来 看 一 个 完整 的 例子 : 


<button onclick-"sayHI()"»Say HI</button> 

<button onclick-"unknownCmd()"»Send unknown command</button> 
<button onclick-"stopLocal()"»Stop worker local</button> 
<button onclick="stopRemote()">Stop worker remote</button> 
Xoutput id-"result"»«/output» 
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<script> 
function sayHI() { 
worker .postMessage ({'cmd': 'start', 'msg': 'Hi'}); 


} 


function stopLocal () { 
worker.terminate(); 
document.getElementById('result').textContent = 'worker asi; 
) 


function stopRemote() ( 
worker.postMessage(('cmd': 'stop', 'msg': 'Bye']); 
) 
function unknownCmd() { 
worker.postMessage(('cmd': 'foobar', 'msg': '???']); 


) 


var worker = new Worker('worker.js'); 
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worker.addEventListener('message', function(e) { 
document.getElementById('result').textContent - e.data; 
}, false); 
</script> 


worker.js: 


self.addEventListener('message', function(e) { 
var data = e.data; 
switch (data.cmd) { 
case 'start': 
self.postMessage('WORKER STARTED: ' + data.msg); 
break; 
case 'stop': 
self.postMessage('WORKER STOPPED: ' + data.msg); 
self.close(); 
break; 
default: 
self.postMessage('Unknown command: ' + data.msg); 
n 
), false); 
可 以 看 到 ，close 方法 和 terminate 方法 都 可 以 停止 执行 worker， 只 不 过 调用 的 地 方 不 
同 。 此 外 ， 如 果 你 利用 postMessage 传递 了 不 可 序列 化 的 内 容 〈 比 如 一 个 函数 对 象 )， 浏 览 
器 将 报错 ， 如 图 7.1 所 示 。 


worker.postMessage (function (){}) 


© YUncaught Error: DataCloneError: DOM Exception 25 
{anonymous function) 


图 7.1 传递 不 可 序列 化 的 数据 会 报错 


importScripts() 函 数 可 以 加 载 外 部 的 脚本 代码 ， 这 提供 了 让 你 组 织 Worker 环境 中 代码 
的 能 力 。importScripts0 函 数 接受 一 个 或 多 个 js 文件 URL 作为 参数 : 

importScripts('filel.js') 

importScripts('file2.js', 'file3.js') 

importScripts 是 阻塞 调用 的 , 它 在 返回 后 会 确保 脚本 已 经 下 载 并 在 当前 Worker 的 上 下 
文中 执行 (这 里 只 会 阻塞 Worker 线程 ， 而 不 会 影响 UI 线程 )。 如 果 脚 本 因为 网 络 原因 无 
法 加 载 ， 将 抛 出 NETWORK ERROR 异常 ， 接 下 来 的 代码 也 无 法 执行 。 

另外 要 注意 的 是 Worker 代码 本 身 以 及 内 部 子 Worker 在 创建 时 或 者 使 用 importScripts 
时 ， 都 必须 遵循 同 源 策略 的 限制 。 


7.3 SALA, Worker 代码 


前 面 的 Worker 代码 都 是 调用 的 外 部 js 文件 一 一 这 是 情理 之 中 的 ， 因 为 这 些 代 码 运 行 
在 完全 不 同 的 环境 中 ， 但 是 也 不 是 没有 办 法 将 Worker 代码 嵌入 到 你 的 主线 程 代 码 里 面 去 。 
而 Worker 也 没有 任何 官方 方案 (比如 script 标签 ) 来 嵌入 Worker 的 js 代码 。 

这 时 候 我 们 可 考虑 曲线 救国 。 当 一 个 script 标签 没有 指定 src H. type 特性 被 指定 为 一 
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个 不 被 运行 的 MIME 类 型 时 ,这 个 script 就 仅仅 变 成 了 一 个 “数据 块 ”, 这 种 自 定义 mime-type 
的 script 可 以 用 来 承载 任何 类 型 的 数据 (你 可 能 经 常会 看 到 有 一 些 框架 用 它 来 填充 HTML 
模板 )， 对 于 你 想 要 嵌入 的 Worker 代码 ， 也 可 以 使 用 它 来 做 。 
具体 的 做 法 是 使 用 Blob 对 象 和 window.URL.createObjectURL 方法 ， 根 据 源 代码 手动 
“构建 ”一 个 二 进 制 的 js 文件 : 
<script type-"text/js-worker" id="worker"> 
// 该 脚本 不 会 被 JS 引擎 解析 ， 因 为 它 的 mime-type 是 我 们 自 定义 的 text/js-worker 
//worker 代码 可 以 写 到 这 里 
var num = 0 


for (var i = 0; i < 100; i++) ( 
num += i 


self.addEventListener('message', function (e) ( 
self.postMessage(e.data + ', ' + num) //hi worker, 4950 
}, false); 
«/script» 
<script type-"text/javascript"» 
// 该 脚本 会 自动 被 JS 引擎 解析 ， 因 为 它 的 mime-type 是 text/javascript 
// 该 脚本 会 被 JS 引擎 解析 ， 因 为 它 的 mime-type 是 text/javascript 


var code = document.getElementById('worker').textContent 

// 使 用 Blob 构建 二 进 制 对 象 

//Blob 构造 函数 接受 两 个 参数 ， 第 一 个 是 parts 数组 ， 第 二 个 是 blob 对 象 属性 
var blob = new Blob([code], (type: "text/javascript"]) 


// 创 建 一 个 新 的 myWorker 对 象 ， 包 含 所 有 "text/js-worker" 里 的 脚本 
var myWorker = new Worker (window.URL.createObjectURL (blob) ) 
myWorker.addEventListener('message', function (e) ( 
console.log(e.data) //4950 
), false) 
myWorker.postMessage('get result') 
</script> 
window.URL.createObjectURL(0 方 法 创建 了 一 个 简单 的 网 址 字符 串 ， 该 字符 串 可 用 于 
DOM file 或 者 Blob 对 象 参考 数据 的 引用 地 址 ， 通 常 是 类 似 这 样 的 URL: 


blob:http$3A//localhost$3A8000/a366ca26-fddd-476c-9417-69e83c293bbd 
Blob 网 址 是 唯一 的 ， 且 只 要 文档 还 未 卸载 ， 该 网 址 就 会 一 直 有 效 ， 当 然 你 也 可 以 通过 
window.URL.revokeObjectURL 方法 手动 释放 该 URL 所 引用 的 资源 ， 以 节省 内 存 : 


window.URL.revokeObjectURL (objectURL); 


7.4 共享 Worker 


前 面 我 们 介绍 的 Worker 在 创建 时 都 只 为 主线 程 服务 ， 它 们 被 称 为 专用 Worker 
(Dedicated workers )， 共 享 Worker (Shared Worker) 与 专用 Worker 极其 类 似 ， 它 俩 区 别 在 
于 共享 Worker 能 够 为 同 源 的 多 个 页 面 〈( 标 签 页 ) 所 共享 ， 这 个 特性 可 以 用 在 多 个 页 面 间 的 
数据 同步 或 者 若干 标签 页 共享 一 个 资源 的 情况 。 
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创建 共享 Worker 需要 SharedWorker 构造 函数 : 


var worker = new SharedWorker ("shared-worker.js"); 


共享 Worker 的 实例 由 URL 唯一 确定 ， 与 此 同时 ， 你 还 可 以 传递 一 个 可 选 的 name 参 
数 给 SharedWorker， 为 Worker 实例 显 式 指定 一 个 名 字 ， 这 个 名 字 可 以 为 同一 个 js 文件 创 
建 多 个 Worker 实例 : 


var worker - new SharedWorker ("shared-worker.js", "doSomething"); 


共享 Worker 的 边界 同样 受制 于 同 源 策略 , 这 意味 着 不 同 的 站 点 可 以 使 用 同样 的 name。 
但 如 果 同 一 个 站 点 想 为 不 同 的 js 使 用 同样 的 worker name 就 会 报错 。 


/ /www .example.com/pagel 

var worker - new SharedWorker ("shared-workerl.js", "doSomething"); 
//www.example.com/page2， 这 时 会 报错 

var worker = new SharedWorker ("shared-worker2.js", "doSomething"); 


和 专用 Worker 不 同 的 是 ， 与 共享 Worker 进行 通信 必须 显 式 使 用 MessagePort 对 象 ， 
该 对 象 被 SharedWorker 实例 的 port 属性 所 引用 , 该 对 象 的 用 法 和 专用 Worker 的 用 法 一 致 ; 


worker.port.onmessage = function (e) ( ... ); 
worker.port.postMessage('some message'); 

worker.port.postMessage(( foo: 'structured', bar: ['data', 'also', 
'possible']]); 


在 共享 Worker 代码 内 部 ， 新 的 客户 端 通过 connect 事件 连接 到 该 Worker， 事 件 对 象 的 
ports 属性 会 指向 一 个 表示 所 有 已 连接 “客户 端 ” 的 数组 ，ports[0] 将 指向 当前 连接 的 “客户 
mo 来 看 一 个 完整 的 例子 : 


<span id="iam"></span> «button onclick-"sayHI()"»say hi!«/button» 
<div id-"output"» 
«/div» 
<script> 
function sayHI() { 
worker .port .postMessage ({'cmd': 'hi', 'msg': ' 大 家 好 ! <br>', 'id': id}); 
} 
var output = document.getElementById('output') 
// 生 成 一 个 随机 的 ID， 取 时 间 的 后 四 位 
var id = ('' + Date.now()).substr(-4, 4) 
console.log (id) 
document.getElementById('iam').innerHTML = ' 我 的 编号 是 : ' + id 


var worker = new SharedWorker ('shared-worker.js') 
worker.port.addEventListener('message', function (e) { 
output.innerHTML += e.data 
), false) 
worker.port.start() 
«/script» 


shared-worker.js: 


var ports - [] 
function broadcast (msg) { 
ports.forEach(function (port) { 
port.postMessage (msg) 
H) 
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//connect 依然 可 以 使 用 addEventListener 来 绑 定 


self.onconnect = function(e) { 
// 任 何 客户 端 发 起 连接 的 时 候 都 会 新 建 一 个 MessagePort 实例 
var newPort = e.ports[0] 
// 将 该 实例 单独 管理 起 来 ， 当 然 也 可 以 直接 访问 e ports 属性 
ports.push (newPort) 
newPort.onmessage = function (e) { 
if (e.data.cmd === 'hi') ( 
broadcast(e.data.id + 'i: ' + e.data.msg) 


} 
li 


利用 这 个 模式 甚至 可 以 完成 一 个 多 标签 页 聊天 室 (虽然 这 个 例子 没什么 实际 用 途 )， 
如 图 7.2 所 示 。 


我 的 编号 是 : 1879 | say hit | 


187950: 大 家 好 ! 
1879 说 : ARAF! 
187930: 大 家 好 ! 
7393 说 : 大 家 好 ! 
187936: 大 家 好 ! 
1879 说 : 大 家 好 ! 
7393ii: p 
7393 说 : 大 家 好 ! 

大 家 好 ! 


7393 说 : 

图 7.2 多 tab 共享 worker 
AFE: Worker 技术 虽然 为 客户 端 进行 大 量 后 台 计 算 提 供 了 便利 ， 但 对 于 移动 设备 而 言 ， 
过 分 依赖 Worker 并 不 是 一 个 好 主意 . 你 要 时 刻 记 住 移动 设备 上 的 CPU 和 内 存 等 


资源 都 是 非常 紧俏 的 ， 能 省 资源 就 尽量 省 ， 能 从 产品 设计 上 避免 的 客户 端 计算 的 
就 尽量 避免 。 


ms 
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Web 之 所 以 成 网 ， 离 不 开通 信 这 一 环节 。 在 Web 领域 , 通信 相关 技术 一 直 是 非常 重要 
的 部 分 ， 而 在 HTML 5 时 代 ，Web 应 用 对 通信 的 要 求 更 加 高 了 ， 更 快 的 传输 速度 、 更 高 效 
的 通信 机 制 和 更 稳定 的 信道 …… 这 些 挑战 对 Web 技术 提出 了 更 高 的 要 求 。 

HTML 5 提供 了 许多 技术 工具 来 方便 大 家 开发 出 更 加 具有 实时 性 的 Web 程序 ， 比 如 更 
加 强大 的 XMLHttpRequest 对 象 和 Web sockets 等 。 本 章 将 探究 这 些 通 信 相 关 的 HTML. 5 


8.1 XHR2 


早 在 十 多 年 前 以 Gmail 产品 为 先锋 的 Web 世界 掀起 了 一 场 Ajax 革命 ， 而 作为 这 场 革 
命 的 核心 技术 XMLHttpRequest 对 象 ， 提 供 了 一 种 利用 JavaScript 与 服务 器 端 通信 的 方式 ， 
这 使 得 Web 开发 的 思路 发 生 了 巨大 的 改变 ， 也 诞生 了 一 批 非常 优秀 的 Web 应 用 。 

但 是 随 着 人 们 需求 的 增多 ，XMLHttpRequest 对 象 也 逐渐 显得 有 些 捉 襟 见 肝 ， 不 久 前 
XMLHttpRequest 终于 慢 慢 揭 开 了 Level 2 的 面纱 。 虽 然 来 的 晚 了 一 点 ， 但 是 XHR2 的 强大 
功能 绝对 不 会 让 你 失望 。 


AFE: 我 们 说 XHR 2 的 时 候 ， 通 常 是 指 XMLHttpRequest Level 2 标准 ， 和 我 们 说 CSS 3 
或 者 HTML 5 是 类 似 的 ， 而 且 XHR 2 严格 意义 上 说 并 不 属于 HTML 5 标准 的 一 
部 分 。 


过 去 KHR 对 象 只 支持 传输 字符 串 类 型 的 数据 CDOMString 或 者 XML )， 要 想 用 XHR 
来 实现 二 进 制 数据 的 通信 简直 是 天 方 夜 谭 , 而 如 今 KHR 2 允许 你 与 服务 器 交换 几乎 任意 二 
进 制 数据 。XHR 2 在 XHR 对 象 中 新 增 了 responseType 和 response 属性 ， 用 于 告诉 浏览 器 
我 们 希望 返回 的 格式 类 型 ， 前 者 可 指定 用 于 处 理 服务 器 返回 内 容 的 类 型 ， 你 可 以 将 
xhrresponseType 设置 为 text、arraybuffer、blob、json 和 document 五 种 类 型 ， 默 认 情 况 下 
responseType 将 被 设置 为 text。response 表示 具体 的 返回 内 容 ， 与 responseText 属性 不 同 的 
是 ，response 可 能 包含 DOMString、ArrayBuffer、Blob 或 Document 类 型 的 值 ， 具 体 是 什 
么 取决 于 发 送 请 求 前 responseType 被 设置 为 什么 。 

下 面 我 们 来 看 看 如 何 用 XHR 向 服务 器 请 求 一 张 图 片 : 

<script> 


var xhr = new XMLHttpRequest () 


// 别 忘 了 第 三 个 参数 表示 是 否 使 用 异步 请 求 
xhr.open('GET', '/image.jpg', true) 
// 这 时 候 使 用 arraybuffer 也 是 可 以 的 
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xhr.responseType = 'blob' 


xhr.onload - function(e) ( 
if (this.status == 200) ( 
// 此 时 this.response 是 一 个 Blob 对 象 ,如 果 你 将 responseType i£ ' JJ arraybuffer, 
那么 response 将 自动 转换 成 一 个 RrrayBuffer 对 象 
var url = window.URL.createObjectURL(this.response) // 继 续 使 用 神奇 的 简单 
的 ObjectURL 
var img = new Image() 
img.src = url 
document.body.appendChild (img) 
) 
is 


xhr.send() 

«/script» 

ArrayBuffer 是 一 种 数据 类 型 ， 它 好 比 一 个 容器 ， 用 来 放置 原始 的 固定 长 度 的 二 进 制 数 
据 。ArrayBuffer 对 象 是 无 法 操作 它 的 内 容 的 ， 相 反 你 应 该 创建 一 个 代表 着 特定 格式 的 
ArrayBufferView 对 象 以 读 写 具体 的 二 进 制 数据 。 说 到 ArrayBufferView 就 不 得 不 提 到 类 型 
数组 (Typed Array). 

类 型 数组 是 JavaScript 用 于 访问 二 进 制 数据 的 机 制 ， 一 个 类 型 数组 和 普通 数组 一 样 也 
是 一 个 数组 ， 不 过 一 种 类 型 数组 里 面 它 只 能 有 一 种 变量 类 型 ， 比 如 int32 类 型 数组 将 只 能 
包含 32 位 的 整数 。 一 个 类 型 数组 其 实 就 是 一 个 ArrayBuffer 的 视图 (View)。 我 们 用 一 个 
例子 来 说 明 上 面 的 理论 : 


var buffer = new ArrayBuffer (16) 


这 句 代 码 创建 了 一 个 16 字 节 大 小 的 buffer， 此 时 浏览 器 会 在 内 存 中 预 分 配 出 一 块 16 
字 节 空白 区 块 ， 并 将 它 初始 化 为 0， 对 于 这 块 内 存 其 实 也 干 不 了 什么 别 的 事 儿 ， 这 时 候 必 
须要 提供 一 个 带 有 数据 格式 的 视图 好 让 我 们 操作 这 块 内 存 : 


var int32View = new Int32Array (buffer) 


Int32Array 是 类 型 数组 的 一 种 ， 表 示 32 位 有 符号 整数 ， 除 此 之 外 还 有 Uint8Array CX 
位 无 符号 整数 ) 和 Float64Array (64 位 有 符号 浮 点 数 ) 等 类 型 。 对 于 上 面 的 例子 ， 我 们 分 
配 了 32 个 字 节 给 这 块 内 存 ， 而 一 个 32 位 整数 会 占据 4 个 字 节 ， 因 此 当 为 这 块 内 存 创 建 好 
视图 int32View 后 ， 我 们 会 发 现 int32View 将 会 成 为 一 个 包含 八 个 元 素 的 数组 ， 且 这 八 个 元 
素 都 被 初始 化 为 0， 此 时 你 已 经 可 以 自由 操作 这 块 内 存 了 : 


console.log (int32View) AOO 0 0 

int32View[1] = 12 

int32View[4] = 10 // 此 时 不 会 报错 ， 但 也 不 会 生成 第 5 个 数组 元 素 
int32View[2] = 2147483648 “// 此 时 该 数组 会 溢出 ， 因 为 这 个 数组 仅仅 能 设置 32 为 整数 
console.log (int32View) //[0, 12, -2147483648, 0] 


同一 块 内 存 buffer 可 以 同时 被 多 个 视图 所 操作 : 


var uintl6View = new Uint16Array (buffer) 
console.log (uintl6View) FALO O 27807550795326979072501 


甚至 同一 块 内 存 你 可 以 使 用 多 个 类 型 数组 来 组 合 操作 : 
var buffer = new ArrayBuffer (24) 
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// 第 二 个 参数 表示 开始 字 节 的 索引 ， 第 三 个 参数 表示 长 度 ， 如 果 不 提 供 则 默认 到 缓冲 区 的 末尾 
var idView = new Uint32Array(buffer, 0, 1) 

var usernameView = new Uint8Array(buffer, 4, 16) 

var amountDueView = new Float32Array(buffer, 20, 1) 


再 回 到 ArayBufferView， 从 实现 上 来 讲 Uint32Array 这 样 的 类 型 数组 其 实 都 是 
ArrayBufferView 的 子 类 ，ArrayBufferView 本 身 是 无 法 直接 实例 化 的 。 对 于 前 面 的 抓 取 图 
片 的 例子 ， 我 们 现在 改 为 获取 ArrayBuffer 的 版 本 : 

var xhr = new XMLHttpRequest (); 

// 别 忘 了 第 三 个 参数 表示 是 否 使 用 异步 请 求 

xhr.open('GET', '/image.jpg', true) 

// 这 时 候 使 用 arraybuffer 


xhr.responseType = 'arraybuffer' 


xhr.onload - function(e) ( 
if (this.status == 200) ( 
// 此 时 this.response 是 一 个 ArrayBuffer 对 象 
var uInt8Array = new Uint8Array(this.response); 
// 现 在 你 可 以 对 图 片 进行 任何 奇怪 的 操作 了 ， 比 如 下 面 的 代码 会 破坏 jpeg 图 片 的 显示 效果 
uInt8Array[101] 55 
uInt8Array[100] 259 
uInt8Array[99] = 255 
// 对 图 片 原始 数据 进行 修改 之 后 再 转 回 Blob 对 象 
var blob = new Blob([uInt8Array]) 


var url = window.URL.createObjectURL (blob) 
var img - new Image() 
img.src = url 


document.body.appendChild (img) 
) 
n 


xhr.send(); 


经 过 处 理 后 的 图 片 对 比如 图 8.1 所 示 。 


图 8.1 利用 ArrayBufferView 处 理 二 进 制 数据 


此 外 ，XHR 2 新 增 的 json 类 型 使 得 你 无 须 像 以 前 那样 每 次 返回 都 调用 JSON.parse T : 


Var xhr = new XMLHttpRequest () 
xhr.open('GET', '/test.json', true) 
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xhr.responseType = 'text' 


xhr.onload - function(e) ( 
if (this.status == 200) { 
// 此 时 this.response 是 一 个 JSON 对 象 
document.body.innerHTML = this.response[0].name 
l 
$ 


xhr.send() 


AFE: 截止 到 本 书 撰 稿 时 还 没有 浏览 器 支持 json 这 一 返回 类 型 。 


XHR 2 除了 从 服务 器 抓 取 各 种 类 型 数据 ， 向 服务 器 发 送 自然 也 不 成 问题 。 
发 送 普通 的 文本 数据 和 以 前 没什么 区 别 : 


function sendText (txt, callback) { 
var xhr = new XMLHttpRequest () 
xhr.open('POST', '/server', true) 
xhr.responseType = 'text' 
xhr.onload - callback 
xhr.send(txt); 

i 


sendText ('test string', function(e) { 
if (this.status == 200) { 
console.log (this .response) 
} 
}) 


利用 Ajax 提交 表单 是 非常 常见 的 需求 ，XHR 2 当然 考虑 到 了 这 一 点 ， 并 为 此 设计 了 
-个 新 类 型 FormData， 利 用 FormData 提交 表单 变 得 异常 简单 ， 常 见 的 如 动态 创建 表单 : 


var formData = new FormData() 
formData.append('username', 'filod') 
formData.append('pwd', 123456) 


var xhr - new XMLHttpRequest () 
xhr.open('POST', '/server', true) 
xhr.onload = function(e) ( ... ) 


// 直 接 传递 FormData 对 象 即 可 


xhr.send (formData); 
而 且 可 以 直接 提交 表单 元 素 ， 再 也 不 用 操心 序列 化 之 类 的 活 儿 : 


function sendForm(form) ( 
var formData = new FormData (form) 


// 可 以 在 已 有 表单 的 基础 上 继续 附加 数据 
formData.append('token', '1c2b9b') 
Sd (formData) 


sendForm (document .getElementById ('form1')) 


如 果 你 的 表单 包含 文件 用 FormData 处 理 也 不 在 话 下 ， 下 面 给 出 一 个 选择 文件 后 自动 
Ajax 上 传 的 例子 : 
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function uploadFiles(url, files) { 
var formData = new FormData() 


for (var i = 0, file; file = files[i]; i++) ( 
formData.append(file.name, file) 
$ 


var xhr = new XMLHttpRequest () 
xhr.open('POST', url, true) 
xhr.onload = function(e) ( ... } 


//send 方法 被 调用 时 ， 会 自动 构建 maltipart/form-data 类 型 的 请 求 
xhr.send(formData); 
i 
// 绑 定 文件 表单 的 change 事件 ， 选 定 文件 后 自动 上 传 
document.querySelector('input[type-"file"]').addEventListener('change', 
function(e) ( 
uploadFiles('/server', this.files) 
), false); 


除了 表单 数据 ，XHR 2 也 可 以 向 服务 器 直接 提交 二 进 制 数据 ， 这 些 数据 可 以 来 源 于 用 
户 本 地 文件 ， 也 可 以 来 源 于 JavaScript 中 动态 构建 的 二 进 制 数据 (比如 利用 Canvas 绘制 的 
- 幅 图 )， 方 法 或 许 你 已 经 猜 到 了 ， 直 接 发 送 Blob 或 者 File 对 象 即 可 : 


function upload(blobOrFile) { 
var xhr - new XMLHttpRequest () 
xhr.open('POST', '/server', true) 
xhr.onload = function(e) ( ... ); 
xhr.send (blobOrFile); 

) 

var intl6Array - new Intl6Array (16) 

var blob = new Blob([intl6Array]l) 

upload (blob) ; 


当然 ArrayBuffer 也 不 成 问题 : 


function sendArrayBuffer() { 
var xhr = new XMLHttpRequest () 
xhr.open('POST', '/server', true) 
xhr.onload = function(e) [ ... } 
var uInt8Array = new Uint8Array([1, 2, 3]) 
// 类 型 数组 的 buffer 属性 保存 着 该 数组 的 一 个 ArrayBuffer 引用 
xhr.send(uInt8Array.buffer) 
) 


XHR 2 还 新 增 了 一 个 upload 属性 ， 并 可 以 为 之 绑 定 一 个 onprogress 事件 ， 这 样 你 在 上 
传 大 文件 时 就 可 以 动态 监测 上 传 的 进度 了 : 


Xprogress»«/progress» 

<script> 

function upload(blobOrFile) { 
var xhr = new XMLHttpRequest () 
xhr.open('POST', '/server', true) 
xhr.onload = function(e) ( ... } 


// 配 合 HTML 5 新 增 个 progress 元 素 一 起 使 用 
var progressBar = document.querySelector ('progress') 
xhr.upload.onprogress = function(e) ( 

if (e.lengthComputable) ( 
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progressBar.value = (e.loaded / e.total) * 100; 


) 
5 


xhr.send (blobOrFile) 
$ 


var intl6Array = new Intl6Array (16) 

var blob = new Blob([int16Array]) 

upload (blob) ; 

</script> 

配合 File 相关 API 还 可 以 将 大 文件 进行 分 割 (利用 Blob 对 象 的 slice)， 然 后 分 别 初始 
化 多 个 XHR 进行 上 传 ， 最 后 再 在 服务 端 将 文件 组 装 。 

使 用 过 Ajax 的 都 知道 一 个 事实 ，XHR 请 求 无 法 跨 域 ( 跨 源 )， 如 果 你 要 在 网 站 里 动态 
请 求 其 他 网 站 (如 微 博 API)， 要 么 通过 后 端 进行 中 转 ， 要 么 使 用 JSONP 这 样 的 跨 域 技术 。 
幸运 的 是 ，XHR 2 新 增 了 跨 源 资 源 共 享 (Cross-Origin Resource Sharing, CORS) 的 能 力 ， 
你 只 需要 在 服务 器 端 简单 设置 一 些 标 头 就 可 以 实现 真正 的 跨 域 Ajax 请 求 。 

假设 你 的 网 站 是 www.example.com， 而 此 时 你 想 从 www.exampleapi.com 获取 数据 ， 如 
果 你 直接 使 用 Ajax 请 求 www.exampleapi.com 的 数据 ， 会 收 到 类 似 这 样 的 错误 : 

XMLHttpRequest cannot load http://www.exampleapi.com/. Origin 

http://www.example.com is not allowed by Access-Control-Allow-Origin. 

要 突破 这 个 限制 , 只 需要 在 www.exampleapi.com 域 下 的 所 有 返回 中 加 上 这 样 一 个 http 
标 头 : 


Access-Control-Allow-Origin: http://example.com 


这 句 的 意思 是 ，www.exampleapi.com 域 允 许 example.com 域 的 脚本 请 求 其 数据 。 如 果 
你 的 API 是 公开 的 (例如 CDN 服务 )， 你 可 以 这 样 设置 标 头 允许 来 自 所 有 域 的 请 求 : 


Access-Control-Allow-Origin: * 


对 目标 源 的 返回 设置 了 标 头 后 ， 发 起 跨 源 请 求 的 过 程 和 普通 请 求 的 过 程 其 实 没有 什么 
分 别 : 

var xhr = new XMLHttpRequest () 

xhr.open('GET', 'http://www.exampleapi.com/data.json') 


xhr.onload function(e) ( 
var data JSON.parse (this.response) 


xhr.send(); 

另外 有 一 点 需要 注意 的 是 , 默认 情况 下 跨 源 的 HTTP 请 求 是 不 会 带 上 cookie 等 敏感 信 
息 的 ， 如 果 你 想 要 传递 cookie， 需 要 在 目标 域 加 上 这 样 的 标 头 : 

Access-Control-Allow-Credentials: true 

与 此 同时 在 客户 端 发 起 请 求 时 , 需要 在 发 起 请 求 前 将 XHR 对 象 的 withCredentials 设置 
为 true: 


function ajax(data) { 
var xhr - new XMLHttpRequest () 
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xhr.open('POST', '/server', true) 
xhr.withCredentials = true 
xhr.onload = function(e) ( ... } 


xhr.send (data) 


8.2” 跨 文档 通信 ( Cross-document messaging ) 


在 前 面 Web Worker 的 


章节 中 我 们 已 经 介绍 了 主线 程 和 Worker. 线程 进行 通信 的 


postMessage 接口 ， 其 实 这 个 接口 是 一 个 通用 的 消息 通信 接口 , 在 跨 文档 的 通信 中 也 能 派 上 


KH (AIH Shared Worker 


也 可 以 实现 很 ticky 的 跨 文 档 通信 )。 


不 过 首先 要 明确 的 是 ， 什 么 是 跨 文 档 通 信 ? 所 谓 跨 文档 通信 ， 指 的 是 一 个 文档 与 其 内 
的 iframe 或 者 调用 window.open 创建 的 新 文档 进行 的 通信 一 一 总 之 进行 通信 的 文档 不 能 是 
完全 没关系 的 ， 否 则 也 谈 不 上 “ 跨 ”。 

先 来 看 一 个 最 简单 的 例子 , 我 们 要 在 主页 面向 iframe 发 出 一 句 问 候 , 具体 效果 如 图 8.2 


你 好 ! 


我 是 一 个 frame， 
我 可 能 接收 到 的 信息 是 : 你 好 ! 


主页 面 的 代码 如 下 : 


图 8.2 EKM iFrame 通信 


<input id-"text" type-"text" value=" 你 好 ! "> 
<button onclick="sendMsg () "> 发 送信 息 给 iframe</button><br> 
<iframe src-"iframe.html" frameborder="1"></iframe> 


<script> 


function sendMsg () { 
var iframe = window.frames[0] 


iframe.postMessage( 


$ 
</script> 


iframe 页 面 代 码 如 下 : 


«div» 
我 是 一 个 iframe, «br» 


document.getElementById('text').value, '*') 


我 可 能 接收 到 的 信息 是 : «span id-"msg"»«/span» 


«/div» 
<script> 
window.addEventList 


ener ('message', function (e) { 


document.getElementById('msg').innerHTML = e.data 


) 
</script> 


可 以 看 到 ,通信 机 制 和 Worker 一 模 一 样 ,只 不 过 发 送 消息 和 接受 的 主体 变 成 了 Window 
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实例 (也 就 是 文档 了 )， 这 种 通信 方式 对 于 window.open 创建 的 窗口 同样 适用 。 

再 看 更 复杂 的 例子 之 前 ， 有 必要 仔细 看 看 Message 相关 的 接口 。 首 先 使 用 的 最 多 的 是 
postMessage 了 ,与 Worker 的 postMessage 不 同 的 点 在 于 postMessage 方法 必须 传递 第 二 个 
参数 ， 该 参数 表示 发 送 数据 目标 的 源 : 


iframe.postMessage('hello', 'http://example.com') 


在 上 面 这 个 例子 中 ， 如 果 iframe 本 身 不 是 来 自 example.com H, IMA iframe 里 面 的 网 
页 是 接收 不 到 这 个 hello 信息 的 。 如 果 指 定 为 *， 则 不 限制 接受 信息 方 的 来 源 ， 通 常 而 言 你 
都 需要 指定 该 值 ， 否 则 你 可 能 会 暴露 自己 的 数据 给 其 他 恶意 站 点 。 除 了 通配符 *， 还 可 以 使 
用 “/” 来 限制 信息 只 在 同 源 页 面 间 发 送 : 


iframe.postMessage('hello', '/') 


成 功 发 送 给 目标 window 的 消息 都 会 触发 相应 的 message 事件 ， 该 事件 对 象 包含 这 样 
几 个 属性 ， 如 下 所 示 。 
data: 发 送 的 数据 ， 自 动 序列 化 和 反 序 列 化 。 
origin: 表示 原始 文档 的 源 〈 协 议 、 域 名 和 端口 ) ， 如 http://example.com。 
lastEventId: 返回 最 近 一 次 的 event id， 在 server-sent 事件 中 有 用 。 
source: 引用 了 发 送 消息 的 window 对 象 ， 这 个 window 对 象 有 很 多 限制 ， 相 当 于 
一 个 window 的 代理 CWindowProxy) 。 
口 ports: 返回 包含 MessagePort 对 象 的 数组 。 
利用 source 可 以 在 不 同 源 的 窗口 实现 双向 通信 : 
<button onclick="openWin() "> 打开 新 窗口 </button> 
<script> 
function openWin() { 
var popup = window.open('iframe.html') 
// 这 里 必须 要 等 一 会 儿 才 能 向 目标 窗口 发 送 消息 ， 因 为 目标 窗口 可 能 还 未 加 载 完 毕 
setTimeout (function () { 
popup.postMessage('hello there!', '/') 
), 100) 
j 


window.addEventListener('message', function (e){ 
if (e.origin !== 'http://localhost:8000') return 


000D 


console.log (e.data) //" 我 收 到 你 的 消息 了 ! " 
), false) 
</script> 


iframe.html: 


<div> 

RÆ— iframe, <br> 

我 可 能 接收 到 的 信息 是 : <span id="msg"></span> 

«/div» 

<script> 

window.addEventListener ('message', function (e) { 

document.getElementById('msg').innerHTML = e.data //hello there 
e.source.postMessage (' 我 收 到 你 的 消息 了 ! ', e.origin) 


«/script» 
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8.3 通道 通信 (channel messaging ) 


和 SharedWorker 类 似 , 跨 文 档 的 通信 有 时 候 也 需要 处 理 多 个 文档 共享 一 个 父 文档 的 情 
况 。 典 型 的 场景 就 是 一 个 页 面包 含 多 个 iFrame， 而 这 些 iFrame 之 间 需 要 通信 。 要 正确 管理 
他 们 之 间 的 关系 ， 我 们 就 需要 用 到 通道 消息 (channel messaging) 机制 了 。 

通道 消息 机 制 中 用 于 通信 的 频道 被 实现 为 双向 通信 的 管道 ， 通 信 两 端 (port) 共享 同 
一 个 连接 ， 任 何 一 个 端口 发 送 消息 都 会 传递 到 另 一 端 。 

要 创建 一 个 用 于 通信 的 连接 ， 需 要 调用 MessageChannel0 构 造 函 数 : 


var channel = new MessageChannel () 


创建 好 的 channel 对 象 包含 portl 和 port2 两 个 属性 ， 表 示 连 接 的 两 个 端口 ， 一 个 可 以 
用 作 本 地 端口 ， 另 一 个 可 以 用 作 远 端 端口 ， 此 时 你 需要 使 用 postMessage 的 第 三 个 参数 ， 
将 该 端口 传递 过 去 : 

otherWindow.postMessage('hello', '/', [channel.port2]); 


接收 到 的 该 端口 的 window 即 可 与 本 地 window 创建 一 个 私有 的 通信 通道 , 在 本 地 你 可 
以 直接 使 用 portl 发 送 消息 : 


channel.portl.postMessage('hello from channel!'); 


接收 方 可 以 在 port2 上 绑 定 message 事件 : 


window.addEventListener('message', function (e) ( 
if (e.origin == 'http://localhost:8000') ( 
var port2 - e.ports[0] 
port2.addEventListener('message', function (e) ( 
// 这 里 是 接收 channel.portl.postMessage 的 专属 地 
) 
) else ( 
alert (' 不 满足 源 限 制 ') 


) 
), false) 


发 送 方 自然 也 可 以 接受 接收 方 的 消息 ， 这 时 候 双 向 通信 通道 就 建立 了 : 

channel.portl.onmessage = function (e) { 

; // 在 这 里 处 理 接收 方 的 消息 

要 注意 的 是 ， 如 果 你 在 port 上 使 用 addEventListener 绑 定 了 事件 ， 同 时 必须 调用 start() 
方法 以 启动 整个 消息 流 ， 如 果 你 使 用 onmessage 绑 定 事件 处 理 函 数 会 隐 式 调用 start0 方 法 。 

来 看 一 个 稍微 复杂 的 例子 ， 我 们 的 页 面 上 有 两 个 iframe, HEXA iframe 中 建立 通 
信 的 通道 , 需要 在 iframe2 中 建立 一 个 MessageChannel, 并 将 MessagePort 通过 父 页 面 传递 
到 iframel.html 中 去 ， 先 看 iframe2.html 的 代码 : 


<div id-"message"»«/div» 
<script> 
var msgBox = document.getElementById('message') 
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// 创 建 一 个 新 的 MessageChannel 对 象 


var channel = new MessageChannel () 


// 给 父 级 发 送 一 个 端口 


window.parent .postMessage ('iframe2 加 载 完 毕 '，'/'， [channel -port1]) 


// 显 示 发 送 的 信息 

channel.port2.addEventListener('message', function(e) { 
msgBox.innerHTML = “" 接 受到 的 信息 是 : ' + e.data 

}，false) 

//addEventListener 不 会 隐 式 调用 start () 方法 

channel.port2.start() 

</script> 


主页 面 : 


<iframe src="iframel.html" frameborder="1"></iframe> 
<iframe src="iframe2.html" frameborder="1"></iframe> 
<script> 
window.addEventListener('message', function(e) ( 
if (e.origin — 'http://localhost:8000') ( 
if (e.ports.length » 0) ( 
// 在 父 窗 口中 将 ports 传递 到 iframel 中 去 
window.frames[0].postMessage ('JH14TJF', '/', e.ports); 
} 
} 
}, false); 
</script> 


iframel.html: 


<input id-"text" type="text" value-"Bonjour! "> 
<button onclick-"sendMsg () "> 发 送信 息 给 最 右 -~</button><br> 
«script» 
var port 
function sendMsg() ( 

var message - document.getElementById('text').value 


if (lport) { 

alert ( "信息 发 送 失败 ， 目 前 没有 可 用 端口 ! ") 
) else ( 

port.postMessage (message) 


) 


return false 


) 


window.addEventListener('message', function(e) ( 


// 扩 大 端口 范围 

if (e.origin == 'http://localhost:8000') { 
port = e.ports[0] 

) else ( 


alert(e.origin + ' 这 万 我 不 认识 哈 ! t) 
} 
}, false) 


window.parent.postMessage('iframel 加 载 完毕 '，'/') 
</script> 


最 后 通信 的 界面 如 图 8.3 所 示 。 
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接受 到 的 信息 是 : Bonjour! 


Bonjour! [ 发 送信 息 给 最 右 一 | 


图 8.3 通道 通信 


名 注意: (1) 前 文 介绍 的 两 种 通信 机 制 通常 用 于 多 页 面 环 境 ， 多 页 面 环境 难于 开发 和 测 
试 ， 在 移动 设备 中 请 尽量 不 要 设计 多 环境 的 应 用 ， 这 样 不 仅 能 使 程序 更 简 
单 ， 也 能 减少 资源 的 开销 。 
(2) HTML 5 Web Messaging 相关 标准 截止 到 本 书 撰 稿 时 仍 在 剧烈 变化 当中 ， 读 
者 在 使 用 时 一 定 要 注意 兼容 性 。 
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谈 及 实时 Web, 大 家 都 会 想到 多 人 同时 编辑 的 Google Docs、 实 时 推送 feed 的 Facebook 
以 及 HTML 5 大 型 网 络 游戏 …… 没 错 ， 整 个 Web 技术 的 发 展 一 是 趋向 移动 化 ,二 是 趋向 应 
用 化 ， 而 应 用 化 的 显著 特征 之 一 ， 就 是 高 实时 性 。 

HIML 5 提供 了 Web sockets 让 Web 也 能 向 过 去 桌面 应 用 一 样 建立 真正 的 全 双 工 通信 
连接 ， 这 给 实时 Web 打下 了 坚实 的 基础 。 


9.1 轮 询 和 长 轮 询 (comet) 


所 谓 实 时 系统 ， 即 在 尽 可 能 短 的 时 间 里 响应 用 户 输入 或 者 通知 用 户 变化 的 系统 。 在 过 
E, Web 是 很 难 和 实时 系统 挂 上 钩 的 ， 一 是 网 络 速度 并 不 是 那么 快 ， 二 是 HTTP 本 身 是 一 
种 无 状态 且 一 次 性 的 协议 ， 服 务 器 在 返回 了 数据 之 后 就 与 客户 端 失 去 了 联系 ， 这 些 特 性 都 
和 实时 特性 风 马 牛 不 相 及 一 一 直到 JavaScript 开始 大 规模 的 在 Web 上 应 用 。 

Ajax 的 广泛 使 用 使 得 网 页 在 不 务 载 文档 的 情况 下 与 服务 器 交互 成 为 常态 ,要 保持 和 服 
务 器 高 实时 的 交流 ， 轮 询 (polling) 成 为 人 们 最 容易 想到 的 方案 ， 比 如 我 们 要 检测 一 个 资 
源 的 变化 情况 ， 可 以 每 隔 1 秒 向 服务 器 发 起 一 次 请 求 : 

function queryStatus() ( 

var xhr = new XMLHttpRequest () 
xhr.open('GET', '/entry/status', true) 
xhr.load = function () ( 


if (this.status -- 200) ( 
var ret = JSON.parse (this.response) 


// 我 们 检测 的 资源 有 变化 
if (ret.changed) ( 


j eue { 
// 如 果 没 有 变化 继续 查询 
setTimeout (queryStatus, 1000) 
} 
) 
) 
xhr.send() 


queryStatus() 

轮 询 的 实现 非常 简单 快捷 粗暴 ， 其 缺点 也 是 显而易见 的 : 

口 状态 变迁 和 查询 没有 丝毫 关系 ， 对 客户 端 和 服务 器 的 消耗 都 是 巨大 且 不 必要 的 。 
口 轮 询 间隔 时 间 太 短 导 致 应 用 花费 大 量 CPU 在 查询 上 , 间隔 太 长 时 实时 性 大 打折 扣 。 
口 大 量 查 询 同 时 会 消耗 大 量 网 络 资源 ， 这 也 会 影响 其 他 网 络 服务 或 应 用 。 
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为 了 解决 这 个 问题 ， 一 种 被 称 为 长 轮 询 (comet 或 long polling) 的 技术 发 明了 出 来 ， 
这 种 技术 的 原理 也 很 简单 ， 主 要 利用 了 HTTP 的 长 连接 ， 当 客户 端 第 一 次 发 起 请 求 时 〈 通 


常 是 


Ajax)， 服 务 器 会 查询 是 否 有 更 改 需 要 返回 到 客户 端 ， 如 果 有 就 立刻 返回 ， 如 果 没 有 


就 将 这 一 次 请 求 保持 不 返回 ， 这 时 客户 端的 请 求 会 一 直 处 于 pending 状态 ， 直 到 服务 器 端 
有 更 新 了 再 返回 。 由 于 HTTP 超时 机 制 的 存在 ， 服 务 器 在 没有 更 新 的 情况 下 ， 无 法 一 直 保 
持 这 个 长 连接 ， 这 时 候 通 常会 在 你 设置 的 HITP 超时 的 时 间 范 围 内 (比如 30 秒 ) 返回 一 次 
空 内 容 ， 当 客户 端 收 到 返回 的 消息 时 无论 是 不 是 空 消 息 ), 会 立刻 再 发 起 一 次 请 求 ,然后 


“监听 ”服务 器 发 来 的 变化 ， 这 样 就 实现 了 服务 器 实时 推送 消息 到 客户 端 ， 如 图 9.1 


所 示 。 


Polling techaique Long polling technigue 


图 9.1 轮 询 和 长 轮 询 的 异同 


下 面 给 出 一 个 长 轮 询 的 实例 ， 这 是 一 个 基于 jQuery 的 小 插件 : 


(function ($, undefined) ( 
var defaults - ( 
'"type*: "GET"; 


"url':o'', 
"datan: Th, 
'timeout': 60 * 1000 //60 秒 超时 ， 通 常 你 的 服务 器 端 间隔 要 短 于 这 个 时 间 


'xhrFields': { 
'withCredentials': true // 应 对 跨 域 的 情况 
} 
//options 保持 和 $.ajax 的 api 一 致 
$.poll = function (options, fn) { 
function onMessage (data) ( 
fn (data) 
$.poll (options) 
H 
function onError () ( 
// 如 果 遇 到 错误 ， 就 两 秒 后 重 试 
setTimeout (function (){ 
$.poll (options, fn) 
}, 2000) 
} 
$.ajax (options) 
-done (onMessage) . fail (onError) 
lj 
}) (jQuery) 
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// 使 用 方法 : 
$.poll({'url': '/server'}, function (data) { 
process (data) 


}) 
对 于 服务 器 端 可 能 是 这 样 的 代码 : 
«?php 
$i = 0; 
while (true)( 
// 每 隔 30 秒 输出 一 个 数字 


echo "Number is $i"; 
flush(); 


sleep(30); // 这 时 候 可 能 是 在 等 待 服务 器 数据 变化 ， 但 等 待 一 定 要 在 一 定 间隔 内 返回 一 次 消息 
aber 
) 
?» 
当然 这 个 comet 的 例子 还 不 是 很 完善 ， 需 要 优化 的 地 方 还 很 多 ， 比 如 对 于 不 支持 KHR 
跨 域 的 浏览 器 应 该 做 相应 的 Fallback 策略 (如 JSONP)， 遇 到 错误 时 应 该 使 用 逐渐 增长 的 
超时 检测 机 制 等 等 。 


92 服务 器 事件 (server-sent events ) 


server-sent 事件 是 一 种 非常 简单 的 服务 器 消息 推送 技术 ， 基 本 上 就 是 利用 EventSource 
对 象 监听 服务 器 发 送 到 客户 端的 事件 ， 构 造 EventSource 对 象 只 需 传 入 一 个 URL: 


var source = new EventSource('server.php'); 


和 前 面 介 绍 的 Web 通信 机 制 类 似 ， 创 建 好 EventSource 后 便 可 以 为 其 绑 定 message Hi 
FT: 
source.onmessage = function(e) { 


console.log ('message: ' + e.data) 


i 


上 面 的 代码 监听 着 从 服务 器 传 过 来 的 消息 ， 如 何 传递 消息 可 以 参考 下 面 这 段 PHP 


header("Content-Type: text/event-streamMnin"); 


$counter - rand(1, 10); 

while (1) ( 
S$curDate = date(DATE ISO8601) > 
echo 'datat ["time"-: "* . $curDate . '"j'; 
echo "An Wn"; 


// 将 当前 缓冲 区 里 的 内 容 flush 到 客户 端 ， 但 此 时 还 未 断 开 HTTP 连接 
ob flush(); 

flush(); 

// 每 隔 一 秒 钟 触 发 一 次 事件 
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sleep (1); 
j 
上 面 的 代码 随机 输出 一 到 十 条 消息 ,服务 器 发 送 事件 的 重点 在 于 返回 的 MIME 类 型 必 
须 是 textevent-stream， 每 一 条 消息 用 data: 开 头 ， 消 息 与 消息 之 间 用 两 个 换行 进行 分 割 。 
当然 你 也 可 以 绑 定 自 定义 事件 : 
source.addEventListener('ping', function(e) { 
console.log('event type: ' + e.type) 


console.log('event data: ' + e.data) 
}, false) 


在 服务 端 发 送 自 定 义 事件 需要 加 上 一 行 以 event: 开 头 的 内 容 : 


header("Content-Type: text/event-streamMnin"); 


$counter = rand(1, 10); 
while (1) ( 
$curDate = date(DATE ISO8601); 
echo "event: pingWMn"; 
echo ‘data: ["*Eime"- "o $curDabe - mp 
echo "An in"; 


ob flush(); 
flush(); 
sleep(1); 
) 
EventSource 作为 完备 的 接口 ， 处 理 错误 当然 也 不 能 少 : 


// 网 络 超时 和 访问 控制 出 错 都 可 能 触发 error 事件 


Source.onerror = function(e) { 

alert (' 遇 到 错误 了 ! ') 

可 以 看 到 event stream 是 一 种 简单 的 文本 流 格式 ， 它 必须 使 用 UTF-8 进行 编码 ， 每 条 
消息 都 用 两 个 换行 隔 开 ， 消 息 的 每 一 个 字段 名 和 字段 内 容 都 由 冒号 隔 开 ， 如 果 一 行内 容 以 
冒号 开头 则 表示 该 行内 容 是 注释 。 

Event stream 标准 里 包含 data 和 event 在 内 的 这 样 几 个 字段 。 

口 event: 事件 类 型 ， 如 果 指 定 了 则 在 客户 端 用 addEventListener 绑 定 相 应 事件 名 ， 不 
指定 默认 会 在 客户 端 触发 message 事件 。 

O data: 数据 字段 ， 如 果 服 务 器 返回 多 行 以 data: 开 头 的 数据 ，EventSource 对 象 会 将 
这 些 数据 连接 起 来 ， 并 为 这 些 数 据 行 之 间 插 入 一 个 换行 符 。 

O id: SHE ID. 

口 retry: 以 ms 为 单位 指定 重 连 时 间 。 

EventSource 对 象 包含 这 样 一 些 属性 ， 使 得 你 可 以 进一步 控制 消息 推送 的 过 程 。 
onerror: 发 生 错误 时 触发 。 

onmessage: 普通 消息 时 触发 。 

onopen: 连接 打开 时 触发 。 

readyState: 表示 连接 的 状态 (只 读 整数 ) , 可 能 取 值 是 CONNECTING (0) OPEN 
(1) 或 CLOSED (2) 。 
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调用 close 方法 可 以 关闭 连接 : 
source.close() 


可 以 看 到 服务 器 事件 其 实 就 是 将 comet 技术 进行 了 标准 化 ， 对 于 单纯 的 服务 器 推送 而 
言 是 很 好 的 技术 解决 方案 ， 但 是 在 需要 和 服务 器 进行 双向 通信 的 场景 ， 服 务 器 事件 就 无 能 
为 力 了 。 


9.3 Web Sockets 


以 上 这 些 实时 服务 器 通信 方案 都 基于 HTTP 协议 ， 他 们 的 问题 在 于 HTTP 本 身 的 开销 
很 大 ， 每 一 次 请 求 都 会 带 上 不 小 的 包头 ， 这 对 于 实时 应 用 来 说 是 非常 伤 的 因素 。 

与 此 同时 ， 高 实时 性 不 仅 意味 着 服务 器 实时 推送 数据 到 客户 端 ， 也 需要 客户 端 也 能 实 
时 推送 数据 到 服务 器 端 ，Web Sockets 将 传统 的 套 接 字 引入 了 Web， 使 得 在 Web 上 建立 全 
双 工 通信 通道 成 为 可 能 。 

相 较 于 传统 Socket 连接 ， 建 立 一 个 Web Socket 连接 要 简单 许多 ， 你 不 用 考虑 协议 族 、 
数据 流 和 监听 等 等 杂事 儿 ， 只 用 new 就 行 了 : 

var socket- new WebSocket('ws://localhost/chat') 

由 于 Web Sockets 其 实 是 一 种 新 的 通信 协议 ， 因 此 在 新 建 的 时 候 需要 指定 完整 的 连接 
地 址 ， 并 以 ws 开头 ， 和 http 协议 类 似 ，Web Sockets 也 有 自己 的 安全 连接 版 本 : 

var ssocket- new WebSocket ('wss://localhost/chat') 

除了 url, 在 调用 WebSocket 的 时 候 还 可 以 传递 一 个 可 选 的 子 协议 (sub-protocol) 参数 ， 
接受 字符 串 或 者 字符 串 数 组 ， 你 可 以 在 WebSocket 对 象 的 protocol 属性 访问 它 ， 如 果 你 传 
递 多 个 协议 ， 服 务 器 只 能 接受 其 中 一 个 : 


var socket- new WebSocket('ws://localhost/chat', ['soap', 'xmpp']) 
console.log(socket.protocol) //soap 


Web Socket 连接 在 创建 时 不 会 阻塞 脚本 的 执行 。 和 其 他 耗 时 操作 类 似 ，WebSocket 对 
象 可 以 绑 定 相应 的 事件 来 监听 变化 : 
// 当 连接 打开 时 


Socket.onopen = function () ( 


$ 

// 当 连接 遇 到 错误 时 

Socket.onerror = function (error) { 
console.log('WebSocket Error: ' + error) 

$ 

// 当 收 到 服务 器 端的 消息 时 


Socket.onmessage = function (e) { 
console.log('Server say: ' + e.data) 


li 


"als 
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可 以 看 到 和 通信 相关 的 API 都 是 如 此 的 类 似 ， 发 送 也 不 例外 : 


Socket.send('hi everybody!') 
send 方法 除了 可 以 发 送 字符 串 到 服务 器 ， 二 进 制 数据 也 不 成 问题 : 


// 从 canvas 元 素 获 取 一 幅 图 片 ， 从 画布 的 (0, 0) 开始 获取 480*320 大 小 的 图 像 
var img = canvas.getlImageData(0, 0, 480, 320) 
// 创 建 一 个 类 型 数组 ， 并 将 图 片 数据 存 入 该 数组 中 
var binary = new Uint8Array(img.data.length) 
for (var i = 0; i < img.data.length; i++) ( 
binary[i] = img.data[i] 


socket.send(binary.buffer) // 也 可 以 直接 传递 Blob 对 象 

这 样 你 可 以 使 用 Web Socket 来 上 传 或 者 下 载 文件 了 (虽然 这 并 不 是 一 个 明智 的 选择 ): 

var file = document.querySelector('input[type-"file"]').files[0] 

Socket.send(file) 

服务 器 发 送 给 客户 端 数据 时 会 触发 message 事件 ， 当 然 你 可 以 设置 客户 端 接受 什么 类 
型 的 数据 ， 比 如 类 型 数组 : 

// 二 进 制 数 据 你 可 以 发 送 Blob 和 ArrayBuffer 对 象 

//binaryType 可 以 指定 为 arraybuffer 或 blob 


Socket.binaryType = 'arraybuffer'; 
sSocket.onmessage = function(e) { 


console.log(e.data.byteLength) // 接 收 到 ArrayBuffer 对 象 


通过 查询 WebSocket 对 象 的 readyState 属性 来 获知 当前 连接 的 状态 : 

if(socket.readyState === WebSocket.CONNECTING) { 

console.log(' 正 在 连接 …) 

readyState 包含 以 下 几 种 状态 。 

口 CONNECTING: 连接 正在 打开 。 

口 OPEN: 连接 已 经 打开 ， 可 以 开始 通信 了 。 

口 CLOSING: 连接 正在 关闭 中 。 

口 CLOSED: 连接 已 经 关闭 或 者 无 法 打开 。 

如 果 你 需要 手动 关闭 连接 ,可 以 调用 close0 方 法 , 它 有 两 个 可 选 参数 ,一 个 是 整数 code, 
表示 为 何 关闭 连接 (比如 1004 表示 数据 太 大 )， 另 一 个 参数 是 字符 串 reason， 这 个 也 是 表 
示 为 何 关 闭 连接 ， 只 不 过 是 给 人 看 的 : 

socket .close (1004,，' 数 据 块 太 大 了 ! ') 


WebSocket 的 全 部 API 就 这 些 了 ， 非 常 简单 好 用 ， 对 于 WebSocket 而 言 跨 域 也 是 从 一 
出 生起 就 支持 ， 如 何 进行 域 限制 是 服务 器 端 关心 的 事情 ， 客 户 端 不 用 操心 。 


全 注意 : WebSocket 协议 是 一 种 HTTP 升级 (Upgrade ) 协议 ， 它 无 法 单独 存在 。 从 技术 上 
讲 ， 在 WebSocket 发 起 连接 时 ， 会 先 发 送 一 个 http 请 求 并 带 上 Upgrade 的 标 头 ， 
如 果 请 求 成 功 会 返回 一 个 http 101 的 状态 码 ,表示 协议 转换 ( Switching Protocols ), 
这 时 候 才 真正 开始 建立 socket 连接 。 
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9.4 利器 : SocketIO 


对 于 一 个 实时 应 用 (或 游戏 ) 来 讲 ， 一 些 通用 的 场景 是 不 断 出 现 的 ， 如 下 所 示 。 
O chanel 通信 : 我 们 经 常 遇 到 同一 个 应 用 需要 多 个 通信 的 通道 ， 例 如 聊天 室 里 的 一 
对 一 聊天 ， 由 于 每 一 个 socket 连接 的 开销 都 是 非常 大 的 ， 因 此 通常 会 选择 把 一 个 
socket 连接 上 切 分 为 多 个 通信 信道 以 节省 资源 (或 者 不 同 通信 信道 使 用 命名 空间 )。 
O 心跳 (heartbeats) : 对 于 一 个 长 时 间 在 线 的 网 络 连接 ， 如 果 双 方 不 进行 通信 ， 那 
么 互相 是 不 一 定 知道 对 方 有 无 掉 线 的 ， 所 以 在 实现 实时 连接 时 ， 我 们 通常 都 会 每 
隔 一 段 时 间 进 行 一 次 数据 交换 ， 以 确认 对 方 是 否 在 线 。 
O JSON: 作为 Web 上 甚至 网 络 应 用 里 数据 交换 格式 的 事实 标准 ,你 的 实时 连接 如 果 
还 不 支持 JSON 自动 序列 化 ， 那 就 真 的 out 了 。 
O 重 连 : 网 络 环境 千变万化 ， 你 的 应 用 随时 都 有 可 能 掉 线 ， 可 靠 的 重 连 机 制 是 必 不 
可 少 的 。 
O 网 络 事件 和 自 定义 事件 : 在 你 的 应 用 发 出 消息 或 者 网 络 遇 到 问题 时 ， 亦 或 是 你 自 
己 想 进行 某 些 操作 时 ， 事 件 都 是 你 不 苦口 的 良药 。 
WebSocket 本 身 的 接口 足够 简单 ， 但 这 同时 意味 着 其 功能 不 太 强 大 ， 它 提供 的 仍然 是 
最 底层 的 网 络 通信 功能 。 上 面 列 出 的 这 些 应 用 场景 ，WebSocket 通通 都 不 支持 。 再 加 之 
WebSocket 的 浏览 器 支持 还 不 够 理想 ， 许 多 浏览 器 在 不 支持 WebSocket 时 你 还 得 考虑 用 
comet 甚至 轮 询 进 行 优雅 降级 。 
如 果 你 在 寻找 应 对 实时 场景 的 利器 ， 那 么 SocketIO 将 是 你 不 二 的 选择 ， 以 上 提 到 所 
有 问题 ，SocketIO (http://socket.io/) 都 已 经 帮 你 解决 了 。 
Socket.IO 是 著名 开源 组 织 LearnBoost 的 一 个 项 目 ，Socket.IO 的 目标 是 为 所 有 浏览 
和 移动 设备 提供 实时 通信 的 能 力 ， 并 且 消 除 不 同 底层 通信 机 制 带 来 的 差异 ， 让 你 完全 把 精 
力 放 到 程序 逻辑 而 不 是 底层 细节 上 。 目 前 SocketIO 已 经 发 展 成 为 一 个 通信 协议 
(https://github.com/LeamBoost/socket.io-spec)， 在 前 后 端 统 一 了 通信 接口 ， 而 且 已 经 有 多 种 
语言 的 实现 。 
以 node.js 的 后 端 为 例 ， 创 建 一 个 实时 服务 只 需 简 单 几 行 代 码 : 
// 让 socket.io 监听 80 端口 ， 默 认 的 http 服务 端口 
var io = require('socket.io').listen(80) 


// 当 有 客户 端 连 上 服务 器 时 会 触发 connection 事件 
io.sockets.on('connection', function (socket) ( 
//connection 回调 中 可 以 获取 到 当前 客户 端 与 服务 端 之 间 的 连接 socket 
// 可 以 调用 其 emit 方法 在 该 连接 的 客户 端 触发 自 定义 的 事件 ， 并 传递 可 序列 化 的 数据 (字符 串 
和 ISON 对 象 ) 
Socket.emit('news', ( hello: 'world' }) 
// 服 务 器 也 可 以 监听 来 自 客户 端的 事件 
Socket.on('myevent', function (data) { 
console.log (data) 
}) 
H 


客户 端 代码 : 


ss 
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<script src-"/socket.io/socket.io.js"»«/script» 
<script> 
7 
var socket = io.connect('http://localhost') 
/ [BRA Sf Cemit) 的 事件 可 以 在 客户 端 进行 监听 
Socket.on('news', function (data) { 
console.log (data) 
Socket.emit('myevent', { my: 'data' }) 


«/script» 

可 以 看 到 前 后 端的 代码 接口 相同 ， 也 非常 简单 。 在 现代 浏览 器 中 ，SocketIO 会 优先 使 
用 WebSocket 技术 来 建立 与 服务 器 的 连接 , 如果 WebSocket 不 可 用 ，Socket.IO 会 尝试 进行 
降级 ， 使 用 其 他 替代 技术 来 建立 连接 ,但 是 返回 的 接口 都 是 一 致 的 。 具 体 的 降级 顺序 如 下 : 
WebSocket; 
Flash Socket; 
AJAX long-polling: 
AJAX multipart streaming: 


Forever IFrame; 
JSONP polling. 

这 些 降 级 策略 确保 了 基于 Socket.IO 编写 的 代码 可 以 在 几乎 所 有 的 浏览 器 中 正常 工作 ， 
这 一 点 非常 厉害 。 

Socket.IO 是 标准 的 node package， 要 在 你 的 服务 端 安装 SocketIO 非常 简单 : 


DOOOOCO 


npm install socket.io 


- 行 命令 即 可 安装 。Socket.IO 服务 器 端 若 要 正常 运行 ， 必须 绑 定 在 一 个 http 服务 器 实 
例 上 : 


var http = require('http'), 
sio = require('socket.io'), 
fs = require('fs') 


function handler(req, res) ( 
//index.html 包含 我 们 的 客户 端 代码 
fs.readFile( dirname + '/index.html', function(err, data) ( 
if (err) ( 
res.writeHead (500) 
return res.end('Error loading index.html') 


j 


res.writeHead (200) 
res.end (data) 
} 

y 
// 利 用 http 模块 创建 一 个 服务 器 实例 app， 并 监听 80 端口 
var app = http.createServer (handler) 
app.listen(80) 
// 将 socket.io 绑 定 至 该 实例 


var io = sio.listen(app) 
io.sockets.on('connection', function(socket) { 
Socket.emit('news', ( 


hello: 'world' 
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H) 
Socket.on('myevent', function (data) { 
console.log (data) 
} 
i) 


如 果 你 基于 Express 这 样 的 框架 构建 Web NH], SocketIO 也 可 以 轻松 兼容 : 


var app = require('express')(), 
server - require('http').createServer (app), 
io = require('socket.io').listen(server) 


server.listen(80) 


app.get('/', function(req, res) ( 
res.sendfile( dirname + '/index.html') 


D) 


io.sockets.on('connection', function(socket) ( 
Ssocket.emit('news', ( 
hello: 'world' 
)) 
socket.on('myevent', function(data) ( 
console.log (data) 
)) 
)) 


如 果 你 没有 手动 指定 Socket.IO 绑 定 的 http 实例 ， 那 么 SocketIO 会 帮 你 创建 一 个 http 
服务 器 实例 : 


var io = require('socket.io').listen(80) 


在 第 一 个 例子 中 我 们 已 经 看 到 了 Socket.IO 为 单个 连接 触发 自 定义 事件 非常 容易 ， 但 
是 要 注意 Socket.IO 中 也 有 一 些 默 认 事件 例如 connect, message 和 disconnect 等 


var io = require('socket.io').listen(80) 


io.sockets.on('connection', function (socket) ( 
// 为 所 有 连接 触发 事件 也 非常 简单 ，io .sockets 中 维护 了 当前 服务 器 中 所 有 的 连接 
io.sockets.emit('all', (msg: ' 这 条 消息 所 有 人 都 能 看 到 ' } ) 


Socket.on('private message', function (from, msg) { 
console.log('I received a private message by ', from, ' saying ', msg); 
} 
// 用 户主 动 断 开 连接 时 会 触发 disconnect 事件 
socket.on('disconnect', function () ( 
io.sockets.emit('user disconnected') 
) 
) 


对 于 实时 应 用 , 为 一 个 用 户 (或 一 个 连接 ) 存储 数据 是 非常 常见 的 需求 , 使 用 Socket. IO 
提供 的 get 和 set 方法 可 以 方便 地 做 到 这 一 点 : 


io.sockets.on('connection', function (socket) ( 
Socket.on('set nickname', function (name) ( 
Socket.set('nickname', name, function () { 
Socket.emit('ready') 
} 
dy 
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Socket.on('msg', function () ( 


// 在 整个 会 话 周期 中 ， 该 连接 的 nickname 都 可 以 取 到 
socket .get('nickname'，function (err, name) ( 


console.log('msg from: ', name) 
3) 


} 
20) 


在 默认 情况 下 ， 一 个 Socket 连接 都 被 管理 在 默认 的 命名 空间 UD 下 ， 有 时 候 你 可 能 
需要 集成 第 三 方 的 代码 或 者 分 享 你 的 代码 给 其 他 人 ， 这 时 候 需要 自 定义 命名 空间 来 帮忙 。 
对 于 客户 端 来 讲 不 同 命名 空间 就 好 像 两 个 不 同 的 服务 器 地 址 : 
«script» 
var chat = io.connect('http://localhost/chat'), 
news = io.connect ('http://localhost/news') 
//chat 和 news 互 不 干扰 
chat.on('connect', function () ( 
chat.emit('hi!'") 


} 


news.on('news', function () { 
news.emit('woot') 


</script> 


对 于 服务 端 来 讲 ， 只 用 绑 定 一 个 http 服务 器 ， 实 际 上 SocketIO 内 部 只 用 一 个 实际 
WebSocket 连接 来 管理 多 个 命名 空间 ， 这 是 一 种 典型 的 “多 路 复 用 ”技术 : 
var io = require('socket.io').listen(80) 


var chat - io 
//o£ 方法 会 返回 特定 命名 空间 的 sockets 实例 
.o£('/chat') 
-on('connection', function (socket) ( 
socket.emit('msg', ( 
that: 'only', 
'/chat': 'will get! 
}) 
chat.emit('msg', { 
everyone: 'in', 
"chat: "will get! 
}) 
} 


var news = io 
.of('/news') 


// 此 时 news 的 connection 事件 与 chat 的 connection 互相 是 不 会 有 关系 的 
-on('connection', function (socket) ( 


Socket.emit('item', ( news: 'item' ]) 
} 


挥发 性 消息 (volatile messages) 是 SocketIO 提供 的 非常 有 用 的 一 个 功能 。 所 谓 挥发 
性 消息 是 指 这 些 消 息 有 可 能 被 客户 端 丢 弃 。 因 为 对 于 特定 连接 而 言 ， 客 户 端 很 可 能 因为 网 
络 缓慢 等 原因 无 法 正常 接收 特定 的 消息 ， 此 时 将 这 些 信息 作为 挥发 性 消息 进行 发 送 ， 此 时 
客户 端 不 一 定 能 接收 到 消息 ， 而 且 程 序 也 不 会 报错 : 


var io = require('socket.io').listen(80) 


io.sockets.on('connection', function (socket) { 
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// 假 设 有 一 个 异步 获取 实时 微 博 的 方法 

var timer = setInterval (function () { 
getTweets (function (tweets) { 

Socket.volatile.emit('tweet', tweets) 

n 

}, 100) 

// 客 户 端 很 可 能 在 你 获取 微 博 的 时 候 断 开 连 接 ， 此 时 如 果 调 用 socket .emit 方法 程序 会 报错 

socket.on('disconnect', function () ( 
clearInterval (timer) 

} 

) 


学 过 计算 机 网 络 的 同学 应 该 都 知道 ， 确 认 (acknowledgement) 消息 在 网 络 通信 中 是 很 
重要 的 部 分 (比如 TCP 就 要 进行 三 次 握手 )。SocketIO 也 提供 了 确认 消息 功能 ， 使 得 你 可 
以 在 向 服务 器 发 送 消息 后 可 以 得 知 对 方 是 否 真 的 收 到 了 消息 ; 


var io = require('socket.io').listen(80) 


io.sockets.on('connection', function (socket) ( 
// 回 调 的 第 二 个 参数 可 以 传 一 个 "确认 "回调 
Socket.on('ferret', function (name, fn) ( 
fn('woot') 
) 
)) 


客户 端 : 


<script> 
var socket = io.connect () 
Socket.on('connect', function () ( 


// 触 发 事件 的 第 三 个 参数 是 对 "确认 "的 确认 
Socket.emit('ferret', 'tobi', function (data) ( 
console.log(data) //'woot' 


) 
</script> 
当然 ， 广 播 消息 也 是 必 不 可 少 的 : 


io.sockets.on('connection', function (socket) ( 
// 广 播 将 发 送 给 当前 app 中 除 当 前 连接 以 外 的 其 他 连接 
// 另 外 broadcast 对 send 方法 也 适用 


Socket.broadcast.emit('user connected') 
Ps 
外 注意 : 如 果 你 要 给 所 有 人 “广播 ”， 请 直接 使 用 io.sockets.emit À io.sockets.send. 


Socket.IO 的 全 部 内 容 就 是 这 些 了 ，Socket.IO 提供 了 一 把 锋利 的 小 刀 ， 要 想 运用 好 它 ， 
还 得 不 断 在 实践 中 摸索 。 


95 基于 Socket.IO 的 聊天 室 


实时 聊天 是 再 常见 不 过 的 一 种 需求 了 ， 在 Web 上 也 不 乏 实时 (包括 大 量 基于 Flash d 
术 的 ) 聊天 产品 。 现 在 让 我 们 自己 动手 来 实现 一 个 HIML 5 版 本 的 聊天 室 吧 。 
首先 我 们 要 想 想 聊天 室 支持 一 些 什 么 样 的 功能 : 
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口 聊天 。 聊 天 室 当 然 应 该 支持 聊天 ! 既然 话 已 出 口 ， 那 么 我 们 就 决定 这 个 聊天 室 支 
持 多 人 聊天 吧 。 

口 支持 点 对 点 聊天 ， 即 可 以 对 聊天 室 里 的 其 他 用 户 发 送 私信 。 

口 同时 支持 手机 和 桌面 。 这 意味 着 我 们 的 界面 要 响应 。 

对 于 开发 人 员 来 讲 ， 需 求 有 了 ， 事 儿 自 然 就 好 办 了 。 

第 一 步 自然 是 设计 UI。 我 们 的 聊天 应 用 需要 两 个 界面 ， 一 个 是 登录 界面 ， 这 个 界面 里 
包含 一 个 取 名 字 的 输入 框 和 一 个 登录 按钮 ， 如 果 聊 天 室 里 已经 有 用 户 了 ， 那 么 应 该 提示 用 
户 昵称 无 法 使 用 。 另 一 个 是 聊天 界面 ， 这 个 界面 里 有 所 有 人 正在 聊天 的 实时 记录 ， 有 输入 
框 可 以 发 表 聊 天 ， 有 在 线 用 户 列表 ， 单 击 用 户 可 发 起 私 聊 。 有 了 这 些 描 述 ，HTML 设计 基 
本 上 也 可 以 出 炉 了 : 


<h1>Socket .IO Chat Demo</h1> 
<div class-"wrap" class-"chatroom"» 
<div class-"nickname"» 
<form class-"set-nickname"» 
<label for="nick"> 输 入 昵称 后 进入 聊天 室 </label> 
<input class-"nick" name-"nick" type="text" placeholder=" 昵 称 " /> 
<button type="submit"> 进 入 </button> 
<p class="nickname-err"> 该 昵称 已 经 有 人 使 用 </p> 
</form> 
</div> 
<div class="messages"> 
<div class="nicknames"> 
<span> 当 前 在 线 : </span> 
<b> 小 明 </b> <b> 小 黄 </b> 
</div> 
<div class="lines"> 
<p><b> 小 明 : </b> 我 好 像 又 长 高 了 ! </p> 
<p><b> 小 黄 : </b> 我 好 像 英 语 变 好 了 ! </p> 
<p><b> 我 : </b> 你 们 俩 好 厉害 ! </p> 
</div> 
</div> 
<form class="send-message"> 
<span class="to"> 发 送 给 <b> 所 有 人 </b>: </span> 
<input class-"message" type-"text"/ placeholder=" 在 这 里 输入 消息 发 送 " /> 


<button> 发 送 </button> 
«/form» 
«/div» 
运行 效果 如 图 9.2 所 示 。 
Socket.lO Chat Demo 
输入 昵称 后 进入 聊天 室 ŽA 
该 昵称 已 经 有 人 使 用 


当前 在 线 : 小 明 小 黄 

小 明 : 我 好 像 又 长 高 了 ! 

小 黄 : 我 好 像 英 语 变 好 了 1! 

发 送 给 所 有 人 : r E:3 


图 9.2 运行 效果 
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接 下 来 的 目标 ， 让 界面 变 得 好 看 ， 而 且 要 在 手机 、 平 板 、 和 桌面 都 变 得 好 看 ， 运 用 
media query 做 到 这 一 点 并 不 难 。 如 图 93、 图 9.4、 图 9.5 和 图 9.6 所 示 。 


Socket.IO Chat Demo 
ance Er) C3 
Socket.IO Chat Demo 
输入 昵称 后 进入 聊天 室 
herk 


在 这 里 输入 消息 发 送 


图 9.3 登录 界面 图 9.4 手机 效果 


Socket.IO Chat Demo 
mes Er) 
小 明 : 我 好 像 又 长 高 了 ! 


Jut ”我 好 像 英语 变 好 了 ! 
R: ”你 们 俩 好 厉害 ! 


发 送 给 所 有 人 : ”在 这 里 输入 消息 爱 送 E 


图 9.5 平板 效果 


Socket.IO Chat Demo 
小 明 : RITRXKAT! 当前 在 线 : 
qd ARGRREESET! 


ETT 


图 9.6 桌面 效果 
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我 们 设计 了 一 套 文本 框 和 一 个 按钮 样式 ， 页 面 的 三 种 不 同 布局 ， 完 整 代码 如 下 : 


body { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
background: #eee; 


) 


KEA 
text-align: center; 
font-size: 40px; 
color: rgba(0, 0, 0; .8); 
text-shadow: 0 lpx 1px #fff; 
D 


-wrap { 
max-width: 900px; 
position: relative; 
margin: auto; 
border: 1px solid #ddd; 
border-radius: 10px; 
background: #f3f3f3; 
box-shadow: 0 0 25px rgba(0, 0, 0, .07), inset 0 1px llpx rgb(255, 255, 
255); 


) 
/* 按钮 和 表单 样式 */ 
input[type-"text"] ( 
border: 1px solid #ccc; 
padding: 12px; 
width: 250px; 
font-size: 14px; 
color: #777; 
border-radius: 5px; 
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 
margin-bottom: 10px; 
} 
input [type="text"] :focus { 
border-color: #999; 
outline: 0; 
} 
button { 
margin: 0; 
display: inline-block; 
text-decoration: none; 
background: #00b5d6; 
border: 1px solid #00a5c3; 
border-radius: 7px; 
color: #fff; 
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 
inset 0 0 10px #008da7; 
font: 600 1.3em/1.7em "helvetica neue", helvetica, arial, sans-serif; 
text-align: center; 
text-shadow: 0 1px lpx 4006679; 
cursor: pointer; 
} 
button:hover, 
button:active, 
button:focus { 
background: #009cb8; 
pox- shadow: inset 0 1px lpx rgba (255, 255, 255; 01), 
inset 0 0 10px #007287; 
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} 
BE f 
font-size: 20px; 
} 
} 


后 端 程序 我 们 在 此 并 不 考虑 多 实例 多 机 器 的 情况 ,仅仅 针对 单 实例 开发 我 们 的 聊天 室 程序 ， 
这 样 可 以 将 所 有 数据 存储 在 单个 进程 的 内 存 空间 中 : 


var http = require('http') 
var fs = require('fs') 


// 使 用 connect 中 间 层 来 处 理 静 态 文件 请 求 
// 详 情 参 考 : https://github.com/senchalabs/connect 
var connect = require ('connect') 
var app = connect.createServer( 
// 挂 载 当前 文件 所 在 目录 
connect.static(  dirname) 
)-listen(8080) 


var sio - require('socket.io') 
var io = sio.listen(app), 
// 我 们 的 程序 没有 引入 后 端 存储 层 ， 因 此 在 程序 运行 期 间 直 接 将 所 有 用 户 保存 在 内 存 里 面 


nicknames = {}, onlines = {} 


io.sockets.on('connection', function(socket) { 

// 在 设计 事件 时 ， 用 冒号 分 割 以 分 组 事件 类 型 是 一 种 易 读 的 好 做 法 

Socket.on('user:pub', function(msg) ( 
Socket.broadcast.emit('user:pub', socket.nickname, msg) 

) 

Socket.on('user:private', function (msg, to) ( 
if(onlines[to]) ( 

onlines[to].emit('user.private', socket.nickname, msg, to) 

) 

) 


Socket.on('nickname', function(nick, fn) { 
//fn 用 于 确认 是 否 登 录 聊天 室 成 功 了 ，true 表示 有 相同 昵称 的 用 户 已 经 进入 
if (nicknames[nick]) { 
fn(true) 
else ( 
fn(false) 
nicknames[nick] = socket.nickname = nick 
onlines[nick] = socket 
socket.broadcast.emit('announcement', nick + ' 已 连接 ') 
io.sockets.emit('nicknames', nicknames) 
F 
) 


Socket.on('disconnect', function() ( 


if (!socket.nickname) ( 


siis 


第 1 篇 HTML 5 移动 Web 开发 基础 


return 


) 


delete nicknames[socket.nickname]; 
delete onlines[socket.nickname] 
// 广 播 "我 "已 经 离开 聊天 室 了 ， 并 更 新 在 线 列表 
socket.broadcast.emit('announcement', socket.nickname + ' WIGERT ') 
Socket.broadcast.emit('nicknames', nicknames) 
} 
) 


前 端 嘛 ， 闲 言 碎 语 不 要 讲 ， 表 一 表 代码 几 十 行 ; 


// 在 boMReady 后 再 开始 执行 实际 代码 
$(function() ( 
var $chatroom - $('.chat'), 
$lines = $('.lines'), 
$nickname = $('.nickname'), 
$setNickname - $('.set-nickname'), 
$nicknames = $('.nicknames'), 
$messages - $('.messages'), 
$message - $('.message'), 
$nick = $('.nick'), 
$sendMessage = $('.send-message'), 
$to - $('.to'), 
$nicknameErr = $('.nickname-err'), toUser = null, myself = null 
// 如 果 不 传 递 url 参数 ，Socket .IO 会 自动 探测 地 址 
// 通 常 是 生成 类 似 /socket.io/1/?t=1371223173600 这 样 的 地 址 


var socket = io.connect () 


Socket.on('announcement', function(msg) { 
$lines.append($('«p»').append($('«em»').text (msg) )) 
) 


Socket.on('nicknames', function(nicknames) { 
Snicknames.empty() .append($('<span> 当 前 在 线 : «/span»')) 
$.each(nicknames, function (key, val) ( 

$nicknames.append($('«b»').text(val)) 
n 
}) 


function message(from, msg, opt to) { 
var label 
if (opt to) f 
label = $('«b»').text(from + 'Xj' + opt to + "说 : ') 
} else { 
label = $('<b>').text(from + ':- ') 
H 
$1lines.append($('«p»').append(label, msg)) 
) 
Socket.on('user:pub', message) 
socket.on('user.private', message) 
Socket.on('reconnect', function() { 
Slines.remove() 
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最 后 前 后 端 联 调 ， 一 次 通过 ! (画外音 : 不 通过 你 敢 贴 代码 出 来 么 …… ) 运行 效果 如 
图 9.7 所 示 。 
Cfi localhost:8080 
Socket.lO Chat Demo 
Tn] 
Socket.IO Chat Demo 
«nes: 0B CD CE3 
小 五 
我 对 小 三 说 
小 五 
小 四 对 小 三 说 
eoe localhost.8080 
e fi localhost:8080 (S 1] 
Socket.IO Chat Demo 
当前 在 线 : 
[ee 
Er 
xn uer: uuu) 


发 送 给 所 有 人 : | 为 什么 没 人 理 和 EC 


图 9.7 三 机 同 聊 


可 以 看 到 ， 即 便 是 代码 写 的 元 长 不 堪 的 情况 下 ， 利 用 SocketIO 搭建 的 聊天 系统 前 后 
端的 js 代码 一 共 都 不 到 200 F, EKINA E, Socket IO 绝对 堪 称 利器 (神器 也 不 为 过 )! 
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iPhone 让 许多 传感器 或 是 感知 设备 晋升 为 智能 手机 实时 标准 陀螺 仪 、 红 外 感应 、 光 
线 感应 、 前 后 摄像 关 和 电子 指南 针 …… 
在 HTML 5 的 世界 里 ， 这 些 感官 ， 自 然 也 不 容 放 过 。 


10.1 感知 方向 (orientation ) 和 动作 (motion ) 


和 鼠标 的 move 事件 感知 鼠标 移动 类 似 ， 感 知 方向 和 动作 等 内 容 主 要 依赖 这 样 几 个 
事件 。 
口 deviceorientation: 当 设 备 进行 倾斜 变换 时 触发 ， 会 提供 设备 的 物理 方向 信息 ， 其 
表现 为 局 部 坐标 系 Clocal coordinate frame) 里 的 旋转 角度 。 
口 devicemotion: 提供 设备 的 加 速 信息 ， 其 表现 为 坐标 系 里 的 某 个 笛 卡尔 坐标 值 ， 其 
中 还 额外 包含 了 自转 速率 。 
O compassneedscalibration: 这 个 名 字 巨 长 的 事件 触发 的 时 候 表示 给 前 述 事件 提供 数 
据 的 电子 指南 针 〈(compass) 需要 (need) 进行 校准 (scalibration) T o 
这 三 个 事件 说 起 来 简单 ， 但 却 没 那么 容易 理解 。 首 先 看 看 deviceorientation 事件 ， 使 用 
方法 和 其 他 事件 没什么 两 样 : 
window.addEventListener('deviceorientation', function(e) { 
// hf e.alpha. e.beta 及 e.gamma 
}, true) 
deviceorientation 事件 会 在 设备 有 明显 的 方向 变化 时 触发 (至 于 多 明显 才 触 发 ， 这 个 取 
决 于 具体 设备 上 浏览 器 的 实现 )。 
理解 deviceorientation 事件 的 关键 在 于 理解 事件 对 象 的 alpha、beta 及 gamma 三 个 值 。 
在 HTML 5 的 相关 标准 (http://dev.w3.org/geo/api/spec-source-orientation.html) 里 ， 它 们 分 
别 表示 设备 坐标 系 相 对 于 地 球 坐 标 系 (Earth coordinate frame) 几 个 轴 的 旋转 角度 值 。 
那么 什么 是 地 球 坐 标 系 呢 ? 其 实 很 简单 ， 就 是 拥有 东 CO. db CYO 和 上 (C2) 三 个 
轴 的 坐标 系 。 
O R OO : 相对 于 地 平面 ， 指 向 正 东方 向 的 轴 。 
O 北 〈Y) : 相对 于 地 平面 ， 指 向 正 北方 向 《与 东 轴 相 垂直 ) 的 轴 。 
O EOD: 相对 于 地 平面 ， 垂 直 指 向 天 空 。 
那么 设备 坐标 系 又 是 什么 呢 ? 大 多 手机 或 者 平板 都 是 以 设备 的 屏幕 为 其 标准 参考 面 
〈 某 些 笔 记 本 以 键盘 为 参考 面 )。 具 体 说 来 ， 你 可 以 把 设备 的 屏幕 比 作 地 平面 ， 其 坐标 系 的 
三 轴 如 下 所 示 。 
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O x: 相对 于 屏幕 (或 键盘 ) 表面 ， 指 向 右手 边 。 

O y: 相对 于 屏幕 (或 键盘 ) 表面 ， 指 向 上 方 。 

O z: 相对 于 屏幕 (或 键盘 〉 表面 ， 指 向 垂直 于 该 表面 的 上 方 。 

用 图 10.1 来 表示 ， 应 该 更 容易 理解 。 

那么 旋转 角度 分 别 又 如 何 ? 举 个 例子 来 说 ， 假 设 你 面 朝 正 计算 北方 ， 将 手机 头 部 朝 北 
平 放 在 桌面 上 ， 然 后 将 手机 以 z 轴 旋 转 alpha”， 如 图 10.2 所 示 。 


alpha 


图 10.1 设备 坐标 系 与 地 球 坐 标 系 图 10.2 沿 着 z 轴 转动 , 设备 之 前 的 位 置 记 为 yp 和 xo 
在 旋转 过 程 中 所 触发 的 deviceorientation 事件 的 事件 对 象 中 ，alpha 就 和 是 yo I y 的 夹 
角 ( 以 度 为 单位 )。 同样 类 似 的 , beta 值 表示 设备 沿 x 轴 转 动 时 , z 轴 产 生 的 夹 角 , 如 图 10.3 
所 示 。 
gamma 值 自然 是 沿 y 轴 转 动 时 ，z 轴 产 生 的 夹 角 ， 如 图 10.4 所 示 。 


图 10.3 沿 着 x 轴 转动 ， 设 备 之 前 的 位 置 记 为 z 和 yo 图 10.4 gamma 值 定义 


你 可 以 在 手机 等 支持 方向 感应 的 设备 里 运行 下 面 的 程序 感受 下 : 


«meta name-"viewport" content-"width-device-width, initial-scale-1, 
maximum-scale-1, user-scalable-no"» 

alpha: «span id-"alpha"»«/span»«br» 

beta: <span id-"beta"»«/span»«br» 
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gamma: «span id="gamma"></span><br> 


<script> 
window.addEventListener ('deviceorientation', function(e) { 
document.getElementById('alpha').textContent = e.alpha 
document.getElementById('beta').textContent = e.beta 
document.getElementById('gamma').textContent — e.gamma 
], true) 
«/script» 


AE: (0) 在 某 些 设备 里 只 有 重力 感应 而 没有 电子 指南 针 (如 macbook) ， 这 种 情况 
下 alpha 的 值 是 探测 不 到 的 , 此 时 DeviceOrientationEvent 对 象 的 alpha 属性 
一 般 会 被 置 为 null. 
(2) Æ Firefox 较 早 的 版 本 (3.6、4 和 5) 里 ， 不 支持 标准 的 DeviceOrientationEvent 
对 象 ， 而 是 有 一 套 自己 的 实现 ( mozOrientation ) 。 


下 面 看 一 个 有 趣 的 例子 ， 我 们 要 实现 摇晃 手机 的 同时 屏幕 里 的 手机 也 跟着 摇 时 ， 如 图 
10.5 所 示 。 


图 10.5 摇 摇 乐 


实现 原理 非常 简单 ， 当 deviceorientation 事件 发 生 时 , 我 们 根据 事件 对 象 的 几 个 属性 值 
来 调整 屏幕 中 img 元 素 的 transform 值 ， 完 整 代码 如 下 : 


«meta name-"viewport" content-"width-device-width, initial-scale-1, 
maximum-scale-1, user-scalable-no"» 
<style> 
div { 
/* 不 要 忘 了 给 容器 加 上 透视 深度 */ 
-webkit-perspective: 250px; 
$ 
</style> 
<div style="text-align:center;padding-top:50px;"> 
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<img src-"../iphone.png" id-"iphone" alt-"" width-"200"» 
«/div» 


<script> 
var iphone = document.getElementById('iphone') 
window.addEventListener ('deviceorientation', function(e) { 
// 如 果 你 左右 倾斜 手机 ， 屏 幕 上 的 手机 也 会 左右 摇 (e-gamma) ， 如 果 前 后 倾斜 ， 屏 幕 上 的 手 
机 则 会 相对 屏幕 前 后 转动 (-e-beta) 
iphone.style.webkitTransform = "rotate(" + e.gamma + "deg) rotate3d 
(1,0,0, " + (e.beta * -1) + "deg)" 
), true) 
</script> 
接着 我 们 看 看 devicemotion 事件 ， 这 个 事件 主要 用 来 探测 设备 的 加 速度 ， 比 如 你 把 手 
机 从 20 楼 扔 下 去 时 ， 它 在 空中 做 自由 落体 运动 时 向 地 面 方向 的 加 速度 大 概 是 9.8mv/s^, 3X 
时 可 以 通过 devicemotion 事件 检测 到 : 
window.addEventListener("devicemotion", function(event) { 
// 如 果 你 的 手机 等 设备 正面 朝 上 在 做 自由 落体 运动 ， 
// 那 么 event.acceleration.z 应 该 大 概 等 于 -9.81 
// 如 果 是 面 朝 下 ， 则 加 速度 为 9. 81 


console.log(event.acceleration.z) 
), true); 
acceleration 是 DeviceAcceleration XJ [f] Sfi], DeviceAcceleration HBAR x, y Fz 
:个 值 ， 分 别 表 示 在 设备 屏幕 朝 上 放置 在 水 平面 上 时 ， 设 备 头 《比如 手机 的 听 简 位 置 ) 方 
向 的 加 速度 y， 设 备 右 手边 方向 的 加 速度 x， 以 及 设备 朝向 地 面 的 加 速度 z。 与 此 同时 ， 我 
们 还 可 以 访问 DeviceMotionEvent 的 accelerationIncludingGravity 属性 来 查看 设备 在 包含 重 
力 加 速度 的 时 候 是 怎样 计算 的 , acceleration 和 accelerationIncludingGravity 的 关系 如 表 10-1 
所 示 。 


表 10-1 acceleration 和 accelerationIncludingGravity 的 关系 


可 能 的 值 /动作 静止 状态 “| EEM 往 左 边 抛 [ X EA 
acceleration {5,0, 9} 
accelerationIncludingGravity (5.0.11) 


DeviceMotionEvent 对 象 还 有 一 个 rotationRate 属性 用 于 查看 设备 的 旋转 速率 ， 它 同样 
拥有 alpha、beta 和 gamma 三 个 值 ， 只 不 过 单位 是 deg/s。 我 们 用 一 个 完整 的 例子 来 说 明 
acceleration、accelerationIncludingGravity 和 rotationRate 的 关系 。 

假定 我 们 将 设备 安置 在 一 辆 匀速 行驶 的 车 上 , 设备 顶端 朝 上 , 屏幕 朝向 车 辆 后 方 固 定 。 
车 辆 以 速度 v 行驶 ， 且 同时 在 向 右 经 过 一 个 圆 弧 弯 道 ， 该 圆 弧 的 半径 为 r， 那 么 此 时 设备 
的 devicemotion 事件 所 记录 到 的 各 项 值 为 : 


event: { 
acceleration: { 
Z RE A // 即 向 心力 
y: 0, 
Z0) 
), 


accelerationIncludingGravity: { 
Ear 20 AE 
y: 0, 
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Z: 9.81 
), 


rotationRate: { 


alpha: 0, 
beta: 0, 
gamma: -v / r * 180 / n // 设 备 目前 仅仅 绕 着 y 轴 在 旋转 


} 


compassneedscalibration 事件 通常 都 不 会 用 到 ， 如 果 该 事件 触发 了 ,说 明 你 需要 校准 设 
备 了 ， 此 时 可 以 给 用 户 一 个 善意 的 提示 : 


window.addEventListener ("compassneedscalibration", function(e) { 
alert (' 你 的 设备 需要 校准 了 ! ') 
e.preventDefault () 

}, true) 


有 时 候 你 如 果 只 是 想 检 测 手机 是 出 于 横 屏 还 是 竖 屏 状态 ， 可 以 通过 查询 window. 
orientation 来 实现 ， 绑 定 orientationchange 可 以 检测 手机 方向 的 变化 : 


window.addEventListener('orientationchange', function() ( 
var displayStr - "Orientation : " 
switch (window.orientation) { 
case 0: 
// 竖 屏 
displayStr += "Portrait" 
break 
case -90: 
ADESL 
displayStr += "Landscape (right, screen turned clockwise)" 
break 
case 90: 
// 向 左 横 屏 
displayStr += "Landscape (left, screen turned counterclockwise)" 
break 
case 180: 
// 竖 屏 〈 倒 着 ) 
displayStr += "Portrait (upside-down portrait)" 
break 
} 
console.log (displayStr) 
}, false) 


善 用 DeviceOrientation 相关 事件 可 以 实现 许多 有 趣 的 应 用 。 

如 果 你 关注 HTML 5 游戏 开发 ， 那 么 方向 感应 应 该 能 给 你 的 游戏 带 来 别 样 的 体验 。 比 
如 你 可 以 通过 倾斜 手机 来 控制 人 物 或 者 物体 的 移动 。 通 过 监控 设备 的 加 速度 ， 可 以 实现 各 
种 手势 比如 “ 摇 一 摇 ” 使 得 你 的 应 用 变 得 更 加 有 趣 。 

此 外 ， 如 果 你 的 电脑 不 支持 方向 感应 器 ， 可 以 利用 Chrome 开发 者 工具 的 模拟 方向 ， 
如 图 10.6 所 示 。 


回 Override Device Orientation 


a: 10 f. z0v[ —— 30] 
图 10.6 模拟 方向 
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10.2 ” 音 视频 捕获 


在 网 页 上 获取 用 户 的 音频 和 视频 输入 从 来 都 是 插件 们 (Flash、Silverlight 和 quirktime 
等 ) 的 专属 地 盘 。HIML 5 带 来 的 重要 改变 就 是 Web 对 设备 硬件 的 控制 力 越 来 越 强 : 
Geolocation API 可 访问 GPS, Orientation API 访问 运动 传感器 ，WebGL 可 以 访问 GPU…… 
既然 HTML 5 拆 要 一 统 客户 端 开发 的 江山 ， 音 视频 捕获 的 能 力 自然 不 能 少 。 

捕获 音频 和 视频 的 核心 API 是 navigator getUserMedia() 方 法 ， 通 过 它 可 以 访问 用 户 设 
备 上 的 摄像 头 或 者 麦克 风 ， 其 语法 是 : 

navigator.getUserMedia (constraints, successCallback, errorCallback) 

和 geolocation 的 API 类 似 , 调用 此 方法 时 浏览 器 会 询问 用 户 是 否 允 许 当 前 网 页 访问 你 
的 媒体 设备 ， 如 图 10.7 所 示 。 


@ O O / @iocaihost:8000/ch4/getm: x x 
Xd 
WM http://localhost:8000/ JEXHERISQURERJX REGE. | 拒绝 | | 允许 X 


c C fi ||) localhost:8000/ch4/getme... 


图 10.7  navigator.getUserMedia 权限 


getUserMedia 的 方法 浏览 器 支持 还 不 完善 《有 前 绥 )， 你 可 能 需要 先 探 测 ; 


navigator.getMedia = ( navigator.getUserMedia |l 
navigator.webkitGetUserMedia |l 
navigator.mozGetUserMedia |l 
navigator.msGetUserMedia); 


getUserMedia 三 个 参数 的 含义 如 下 。 
O constraints: 请 求 所 支持 的 媒体 类 型 ， 比 如 传 入 {video:true，audio:true} 表 示 请 求 视 
频 和 音频 。 
口 successCallback: 如 果 请 求 成 功 ， 回 调 中 会 传 入 一 个 LocalMediaStream 对 象 。 
O errorCallback: 请 求 失败 时 触发 ， 该 参数 可 选 。 
LocalMediaStream 对 象 中 包含 媒体 流 ， 你 可 以 使 用 它 将 媒体 信息 输出 到 video 或 者 
audio 这 样 的 标签 里 ， 例 如 : 


«video src-""»«/video» 
<script> 
navigator.webkitGetUserMedia((video:true,audio:true), function (stream) { 
var video = document.querySelector ('video') 
video.src — window.URL.createObjectURL (stream) 
video.onloadedmetadata = function(e) { 
// 在 这 里 可 以 获取 到 video 的 一 些 元 数据 ， 比 如 视频 宽 高 等 
} 
}, function (code) { 
console.log (code) 
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}) 


</script> 
媒体 请 求 失败 有 多 种 原因 ， 可 能 是 用 户 拒绝 授权 、 媒 体 类 型 不 支持 或 者 未 接收 到 媒 
体 流 。 


获取 媒体 流 就 这 么 简单 ， 最 关键 的 还 是 看 你 如 何 处 理 这 些 媒体 流 ， 配 合 canvas， 你 可 
以 实现 截屏 这 样 的 操作 : 


«video»«/video» 

«img» 

<canvas></canvas> 

<script> 

var video = document .querySelector('video') 
var canvas = document.querySelector ('canvas') 
var ctx = canvas.getContext ('2d') 

var localMediaStream = null 


function snapshot() ( 
if (localMediaStream) ( 
/ /drawImage 方法 可 以 直接 绘制 video 的 当前 帧 
ctx.drawImage (video, 0, 0) 
// 将 canvas 当前 绘制 的 内 容 转换 成 DataURL 
document.querySelector('img').src = canvas.toDataURL('image/webp') 


) 
} 
// 点 击 拍照 ! 


video.addEventListener('click', snapshot, false) 


navigator.webkitGetUserMedia({video: true}, function(stream) { 
video.src = window.URL.createObjectURL (stream) 
localMediaStream = stream 


) 


</script> 
捕获 媒体 流 就 是 这 么 简单 ， 强 大 或 有 趣 的 应 用 完全 取决 于 你 的 想象 力 ， 以 音 视频 捕获 
为 基础 。 视 频 滤 镜 、 人 声 处 理 和 语音 识别 …… 几 乎 没有 Web 做 不 到 的 事 儿 了 。 
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如 今 Web App 大 行 其 道 ， 与 此 同时 历史 记录 的 管理 变 成 了 一 个 大 问题 。 一 个 URL 可 
以 链接 到 一 个 固定 的 资源 一 一 比如 一 篇 博文 或 是 一 个 词 条 。Web App 所 有 的 内 容 都 在 一 个 
页 面 中 进行 管理 ， 虽 然 获得 了 不 俗 的 体验 ， 但 是 应 用 内 的 资源 定位 和 导航 却 成 了 问题 。 
HTML 5 提供 的 history API 使 得 资源 链接 不 再 受 限于 特定 的 文档 。 


11.1 基于 hashchange 事件 管理 导航 


浏览 器 的 历史 记录 导航 是 用 户 非常 常用 的 功能 ， 除 了 单 击 前 进 后 退 按钮 外 ，Window 
上 的 history 对 象 还 可 以 实现 浏览 器 的 导航 ， 比 如 : 

// 后 退 ， 效 果 和 单 击 后 退 按钮 一 样 

window.history.back() 

// 前 进 

window.history.forward() 

// 后 退 一 步 

window.history.go(-1) 

// 后 退 两 步 

window.history.go(-2) 

// 前 进 两 步 

window.history.go(2) 

这 些 方 法 的 一 个 重大 问题 在 于 ， 这 些 导 航 方法 都 会 导致 整个 页 面 卸 载重 新 刷新 ， 在 
Web 还 在 页 面 时 代 时 大 家 并 没有 觉得 这 问题 有 多 么 严重 ,但 是 在 Web App 愈加 流行 的 今天 ， 
页 面 需 要 加 载 的 内 容 和 资源 越 来 越 多 ， 频 繁 的 页 面 加 载 或 卸载 会 消耗 大 量 的 时 间 ， 进 而 导 
致 用 户 体验 变 差 。 

还 好 ，URL 中 有 个 特殊 的 部 分 是 hash 片段 〈 即 # 后 的 部 分 )， 同 一 个 网 页 的 不 同 hash 
之 间 的 跳 转 不 会 重新 加 载 页 面 ， 但 是 却 会 在 历史 记录 里 留 下 脚印 。 再 加 上 hash 跳 转 时 〈 包 
括 在 单 击 前 进 后 退 按钮 时 )，Window 对 象 会 触发 一 个 hashchange 事件 , 利用 这 个 特性 我 们 
可 以 在 完全 不 刷新 页 面 的 情况 下 ， 接 管 整个 页 面 浏览 历史 记录 了 。twitter 率先 大 规模 应 用 
了 这 个 技术 ， 整 个 twitter 其 实 只 有 一 个 页 面 ,“ 页 面 ” 间 的 导航 完全 由 JavaScript 来 控制 。 

hashchange 事件 的 使 用 本 身 并 没有 什么 特别 的 : 


window.addEventListener('hashchange', function(e) ( 
//do something 
]) 


每 一 次 发 生 基 于 hash 的 导航 时 都 会 触发 该 事件 ， 该 事件 监听 器 传 入 的 
HashChangeEvent 对 象 包含 两 个 重要 的 属性 ， 一 是 newURL， 而 另 一 个 是 oldURL， 从 名 字 
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就 能 知道 它 是 干什么 的 了 : 


«a href="#article/1"> 文 章 1</a> 
<a href="#article/2"> 文 章 2</a> 
<div id="page-wrap"></div> 
<script> 
var pageEl = document.getElementById('page-wrap') 
window.addEventListener('hashchange', function(e) ( 
if (e.newURL.indexOf('article/1') » 0) ( 
pageEl.innerHTML = '<h1> 第 一 篇 文章 </h1><p> 这 篇 文章 没 讲 什么 东西 </p>' 
} else if (e.newURL.indexOf('article/2') > 0) ( 
pageEl.innerHTML = "<h1> 第 二 篇 文章 </h1><p> 这 篇 文章 什么 东西 都 没 讲 </p>'" 
) else ( 
alert ('4041! 该 页 无 法 找到 ') 
} 
1 
</script> 


可 以 从 上 例 看 到 ， 一 个 非常 非常 简单 的 URL 路 由 系统 已 经 成 型 了 ， 前 进 后 退 都 不 成 
问题 ， 不 过 这 里 还 有 一 个 问题 ， 就 是 当 第 一 次 访问 带 hash 的 链接 时 并 不 能 正确 路 由 ,我 们 
需要 稍微 改造 一 下 : 

<a href="#article/1"> 文 章 1«/a» 

<a href="#article/2"> 文 章 2</a> 

<div id="page-wrap"></div> 

<script> 

var pageEl = document.getElementById('page-wrap') 

function handleRoute (newURL) { 

if (newURL.indexOf('article/1') > 0) { 
pageEl.innerHTML = '<h1> 第 一 篇 文章 </h1><p> 这 篇 文章 没 讲 什么 东西 </p>' 
) else if (newURL.indexOf('article/2') > 0) ( 
pageEl.innerHTML = '<h1> 第 二 篇 文章 </h1><p> 这 篇 文章 什么 东西 都 没 讲 </p>' 
} else { 
alert("4041 该 页 无 法 找到 ") 
} 
window.addEventListener('hashchange', function (e) { 
handleRoute (e.newURL) 

) 

handleRoute (location.href) 

«/script» 


这 样 ， 路 由 就 能 正确 工作 了 。 
11.2 HTML 5 history API 


JE T hash 的 导航 虽然 能 正常 工作 , 但 对 于 用 户 而 言 ， 带 着 # 符 号 的 URL 总 归 不 是 那么 
美观 , HTML 5 对 history API 的 增强 使 得 我 们 可 以 对 本 域 下 的 URL 进行 任意 更 改 而 不 刷新 
页 面 ， 主 要 用 到 的 是 historypushState0 和 history.replaceState() 两 个 函数 和 配合 其 触发 的 
popstate 事件 ， 先 来 看 看 基本 用 法 : 

var stateObj = ( foo: "bar" } 

history.pushState(stateObj, "page 2", "bar.html") 
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假设 我 们 在 httpz//www.example.com/foo.html 执行 这 两 行 代码 ,那么 页 面 地 址 栏 的 URL. 
会 立马 被 修改 成 为 http:Wwww.example.com/barhtml, 但 是 浏览 器 不 会 真正 的 去 获取 barhtml 
这 个 地 址 的 内 容 ， 而 只 是 单纯 的 修改 页 面 URL 。 

history.pushState 和 history.replaceState 区 别 在 于 ,前 者 增加 历史 ,后 者 算 改 历史 , 可 以 
用 下 面 的 例子 感受 一 下 : 


<button id-"buttoni"»pushState«/button» 

<button id="button2">replaceState</button> 

<script> 

var state = { 
msg: 'i have no words to say' 

} 

document.getElementById('buttonl').addEventListener('click', function () ( 
// 它 会 在 历史 记录 中 增加 一 条 记录 
history.pushState(state, ' 新 标题 1， 'newurl.html') 

3) 

document.getElementById('button2').addEventListener('click', function () ( 
// 它 会 把 当前 的 历史 记录 给 " 算 改 "为 你 所 指定 的 记录 
history.replaceState(state, ' 新 标题 2， '/url/new') 

) 

</script> 


history.pushState() 接 受 三 个 参数 ， 一 个 state 对 象 ， 一 个 title， 一 个 可 选 的 URL. 

O state: state 对 象 就 是 一 个 普通 的 JavaScript 对 象 , 它 将 和 pushState 创建 的 新 的 history 
实体 所 关联 ， 当 用 户 导航 到 这 个 实体 时 (比如 通过 后 退 )，popstate 事件 将 会 触发 ， 
事件 对 象 的 state 属性 就 会 包含 一 个 与 这 个 实体 关联 state 对 象 的 复制 。 

O tite: 本 来 用 这 个 字符 串 应 该 修改 页 面 的 tile， 但 是 截止 到 撰 稿 时 ， 这 个 参数 还 没 
有 什么 作用 。 

O URL: 即将 创建 的 history 实体 的 URL， 浏 览 器 不 会 尝试 真正 加 载 这 个 路 径 ， 但 是 
如 果 用 户 在 此 时 强制 刷新 这 个 页 面 ， 浏 览 器 是 会 加 载 这 个 页 面 的 ， 因 此 你 在 使 用 
这 个 特性 时 最 好 保证 用 户 刷新 后 也 能 得 到 同样 的 结果 

history.replaceState() 方 法 接受 和 history.pushState() 同 样 的 二 个 参数 » replaceState 会 修改 

当前 的 history ci replaceState 在 你 因为 某 些 原因 需要 更 新 state 对 象 或 
者 URL 时 特别 有 
popstate oin hashchange 事件 类 似 ， 在 活动 的 history 实体 发 生 改 变 时 会 触发 。 要 注 
意 的 是 调用 history replaceState0) 或 history.pushState0 方 法 的 时 候 并 不 会 触发 popstate 事件 。 
我 们 用 下 面 这 个 例子 曾 明 事件 的 触发 情况 : 


<script> 
window.onpopstate = function(e) { 
alert('state: ' + JSON.stringify(e.state)) 


history.pushState ({page: 1), 'title 1', '?page-1') 

history.pushState(([page: 2}, 'title 2', '?page-2') 

history.replaceState([page: 3}, 'title 3', '?page-3') 

</script> 

首次 加 载 这 个 页 面 时 , 历史 记录 已 经 加 入 了 三 条 记录 (?page=2 这 条 记录 被 replaceState 
所 算 改 )， 如 图 11.1 所 示 。 
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€ Œ f$ D localhost:8000/ch4/history3.html?page-3 


li localhost:8000/ch4/history3.html?page- 1 


o localhost:8000/ch4/history3.html 
D 打开 新 的 标签 页 


O 显示 所 有 历史 记录 


图 11.1 popstate 事件 


因为 页 面 每 次 初始 加 载 时 都 会 触发 一 次 popstate 事件 (Firefox 是 个 例外 )， 因 此 页 面 
会 弹出 对 话 框 ， 如 图 11.2 所 示 。 


localhost:8000 上 的 网 页 显示 : 
State: null 


Cae j 
图 11.2 第 一 次 加 载 触发 的 popstate 事件 


之 所 以 state 事件 没有 内 容 ， 是 因为 第 一 次 的 加 载 并 没有 传递 state 参数 ， 虽 然 此 时 页 
面 的 地 址 是 ?page=3， 但 是 此 时 触发 的 popstate 事件 是 和 第 一 次 加 载 页 面 创建 的 history 实 
体 相 关联 的 。 如 果 你 这 时 单 击 “ 后 退 ” 按 钮 ， 则 会 弹出 state: {"page":1}， 如 果 你 再 次 单 击 
“前 进 ” 按 钮 ， 则 会 弹出 state: {"page":3}， 因 为 此 时 的 URL 与 最 后 一 次 创建 的 history 所 关联 。 

有 了 这 些 基础 ， 那 么 创建 一 个 router 也 不 是 难事 儿 ， 我 们 将 前 面 基于 hashchange 的 导 
航 系 统 改 为 基于 popstate 事件 的 版 本 : 


<a href="/article/1"> 文 章 1«/a» 
<a href="/article/2"> 文 章 2</a> 
<div id-"page-wrap"»«/div» 
<script> 
var pageEl = document.getElementById('page-wrap') 
function handleRoute (newURL) { 
if (newURL.indexOf('article/1') > 0) { 
pageEl.innerHTML = '<h1> 第 一 交 NNNM 东西 </p>" 
) else if (newURL.indexOf('article/2') > 0) 
pageEl.innerHTML = '<h1> 第 二 rr a a aa 
} else { 
alert ('4041 该 页 无 法 找到 ') 
) 


window.addEventListener('popstate', function (e) ( 
handleRoute (e.state.url) 
2» 
document.addEventListener('click', function (e) ( 
if (e.target.tagName === 'A') 
var url = e.target.getAttribute ('href') 
history.pushState([url:url], '', url) 
handleRoute (url) 
e.preventDefault () 
$ 
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19] 
</script> 


唯一 要 注意 的 是 ， 链 接 本 身 的 默认 行为 必须 要 阻止 ， 否 则 会 导致 浏览 器 真 的 要 加 载 链 
接 页 面 。 


11.3 history.js 


无 论 是 基于 popstate 事件 也 好 ，hashchange 也 好 ， 还 是 更 加 原始 的 轮 询 hash 改变 ， 实 
现 的 都 是 同样 的 “页 面 无 刷新 更 改 URL” 需 求 ， 如 果 你 需要 兼容 各 种 浏览 器 ， 必 不 可 少 需 
要 大 量 编 码 ， 还 好 早 有 人 帮 我 们 做 了 这 件 事 儿 ， 开 源 的 historyjs 库 能 方便 无 颖 的 在 各 种 浏 
览 器 里 实现 我 们 需要 的 效果 。 

history.js Chttps://github.com/browserstate/history.js/) 提供 了 类 似 HTML 5 的 API, 但 是 
可 以 让 你 兼容 几乎 所 有 流行 的 浏览 器 (包括 下 6)， 使 用 和 HTML 5 的 history API 没什么 
两 样 : 


<script src-"plugins/native.history.js"»«/script» 
<script> 
(function (window, undefined) { 


//History 对 象 是 history.js 提供 的 唯一 对 象 ， 它 拥有 和 window.history 几乎 一 样 的 API 
History.Adapter .bind (window, 'statechange', function (){ 
// 为 避免 冲突 将 事件 命名 为 statechange 而 不 是 popstate 
var state = History.getState() 
// 使 用 BHistory.getState() 而 不 是 event.state 
console.log (state) 
) 
History.pushState((state:1), 'title 1', '?state-1') 
//log: (state:1), 'title 1', '?state-1"' 
History.pushState((state:2], 'title 2', '?state-2') 
//log: (state:2), 'title 2', '?state-2' 
History.replaceState(([state:3), 'title 3', '?state-3') 
//log: (state:3), 'title 3', '?state-3' 
History.pushState(null, null, '?state-4') 
//log: (), '', '?state-4' 


History.back() //log: (state:3), 'title 3', '?state-3' 
History.back() //log: (state:1), 'title 1', '?state-1"' 
History.back() //log: (), 'Home Page', '?" 

History.go(2) //log: (state:3), 'title 3', '?state-3' 


)) (window) 
«/script» 


要 注意 的 是 ，historyjs 每 一 次 跳 转 都 会 触发 statechange 事件 ， 而 使 用 window.history.back() 
时 不 一 定 每 次 都 触发 popstate 事件 ， 因 此 使 用 history.js 更 加 可 靠 。 
在 支持 HTML 5 history 的 浏览 器 中 ， 上 例 中 你 看 到 的 URL 可 能 是 这 样 : 


www.example.com/?state-2 
wWww.example.com/?state-3 


而 在 不 支持 HTML 5 history 的 浏览 器 中 ， 会 自动 fallback 到 基于 hash 的 导航 链接 : 
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www.example.com/#?state=2& suid-2 
WWww .example.com/#?state=3& suid-3 


要 注意 这 里 多 了 一 个 _suid 参数 ， 此 参数 的 含义 是 State Unique Identifiers， 这 个 参数 用 


于 访问 调用 pushState 方法 时 传 入 的 一 系列 参数 一 一 因为 hashchange 事件 中 并 没有 在 事件 


对 象 中 关联 相关 数据 。 


history.js 会 自动 将 带 域名 的 URL 参数 转换 为 仅 包 含 path 的 URL, W: 
http://www.example.com/4http://www.example.com/page/1 

会 转换 为 : 

http://www.example.com/£/page/1 

此 外 ， 你 也 不 用 操心 historyjs 在 子 域 和 子 目 录 的 情况 ，historyjs 总 是 能 正确 工作 。 
history.js 项 目的 源码 是 被 分 割 成 了 两 个 部 分 。 

口 history.html4.js 和 history.js: 对 HTML 5 history API 的 包装 。 

口 history.adapter.*.js: 适 配 包括 jQuery, dojo 等 框架 或 库 的 版 本 。 

最 终 你 可 以 使 用 该 项 目 打包 好 的 js 文件 : 


https://raw.github.com/browserstate/history.js/master/scripts/bundled/h 
tml4thtml5/jquery.history.js 
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不 要 重 造 轮子 是 程序 员 世 界 里 广 为 流 传 的 能 言 。 虽 然 利用 前 面 章 节 提 到 的 技术 可 以 实 
现 几乎 任何 移动 应 用 ， 但 是 直接 利用 这 些 技术 来 实现 应 用 的 过 程 毕 竞 是 原始 的 、 低 级 的 ， 
可 能 会 耗费 你 大 量 的 时 间 和 精力 。 

程序 员 们 从 来 不 羞 于 寻找 和 利用 工具 ， 经 过 这 些 年 的 发 展 ， 市 面 上 已 经 有 一 大 票 可 以 
加 速 你 开发 移动 Web 应 用 的 工具 和 代码 ， 本 章 将 选取 它们 中 的 代表 者 和 佼佼 者 加 以 介绍 ， 
并 为 读者 在 最 终 产品 的 技术 选 型 上 提供 指导 。 


12.1 移动 Web 框架 概览 


Web 的 发 展 使 得 其 相关 技术 也 跟随 着 快速 演进 ， 从 过 去 混乱 不 堪 的 Web 开发 ， 到 
Prototype.js 初 有 框架 思想 ， 再 到 YUI 和 jQuery 等 大 行 其 道 ， 一 直到 现在 的 单 页 应 用 和 移 
动 应 用 大 行 其 道 的 时 代 ， 总 有 一 些 技术 能 引领 行业 的 发 展 ， 解 放 程序 员 们 的 工作 。 

本 节 将 对 移动 时 代 的 Web 框架 和 库 们 进行 一 次 走马 观 花 式 的 考察 , 让 你 的 脑海 对 前 端 
技术 的 结构 有 个 大 致 的 勾勒 。 


12.1.1. HTML 5 移动 应 用 技术 大 观 


通常 来 讲 ， 开 发 一 个 完整 Web 应 用 涉及 到 的 前 端 技术 无 非 这 样 几 个 层面 : UI 框架 、 
MVC 框架 和 工具 库 。 很 多 大 型 的 前 端 框 架 比 如 YUI、Closure Library 和 Dojo 等 会 包含 上 
面 这 些 所 有 东西 ， 不 过 在 移动 时 代 这 些 重量 级 的 框架 大 多 数 并 不 满足 我 们 “ 轻 ” 的 需求 ， 
我 们 需要 的 是 更 加 轻 量 级 的 小 框架 ， 职 责 尽 量 单一 且 易 于 扩展 易于 协同 工作 的 工具 。 

在 UI 层 上 ， 目 前 已 经 有 许多 框架 供 选择 ， 它 们 通常 都 会 提供 一 套 适用 于 移动 设备 的 
UI 样式 一 一 可 能 包含 按钮 、 列 表 和 文本 框 等 组 件 ， 有 的 也 会 额外 提供 较 复杂 的 UI 组 件 ， 
如 日 历 选择 器 、Slider 和 工具 栏 等 。bootstrap、jQuery Mobile fil Foundation 是 其 中 的 代表 。 

如 果 你 需要 开发 大 型 或 者 中 型 的 应 用 (意味 着 你 的 应 用 可 能 包含 大 量 的 DOM 操作 以 
及 与 服务 器 的 数据 交互 ), 那么 你 肯定 要 考虑 选择 一 个 MVC 框架 来 简化 你 的 开发 过 程 ， 单 
页 应 用 正 值 泛滥 之 时 , MVC 框架 也 是 成 灾 之 势 。 其 中 只 有 AngularJS, Backbone 和 Emberjs 
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很 多 时 候 你 还 要 借助 一 些小 工具 来 应 对 一 些 特定 的 任务 。 比 如 用 zepto £H jQuery 来 
减 小 应 用 的 大 小 以 节省 移动 设备 上 捉襟见肘 的 流量 ， 使 用 underscore 处 理 列表 数组 的 过 滤 
等 等 。 

当然 移动 世界 也 不 缺 重量 级 大 一 统 的 框架 ，Sencha 就 是 移动 世界 的 领头 羊 ， 它 包含 了 
你 可 能 要 用 到 的 所 有 东西 : UI. tools 和 MVC 等 等 。 

如 果 你 希望 基于 HTML 5 来 开发 界面 ， 但 是 又 需要 访问 移动 操作 系统 未 开放 给 浏览 
的 功能 (比如 联系 人 ), 那么 你 可 以 尝试 一 些 平 台 兼 容 层 的 工具 (如 phonegap ) 将 JavaScript 
代码 编译 成 原生 代码 (Objective-C 或 者 Java) 或 者 与 底层 代码 进行 通讯 ， 最 终生 成 原生 移 
动 应 用 (比如 iOS 或 者 Android 应 用 )。 

上 面 说 到 的 技术 可 以 参看 下 面 的 架构 图 12.1。 


Mobile WebApp 
Technologies 


UI 框 工具 库 
架 
bootstrap Foundation jQuery Mobile zepto 


jQtouch Flat Ul iscroll 
hammer.js 


Kendo  —  SenchaTouch 


MV* 框 
架 


Fastclick 


AngularJS EmberJS Backbone 
underscore 


Knockout Quos 


OS/i 
摄像 头 
距离 / 光 感 应 


图 12.1 移动 Web 应 用 技术 
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当然 ， 图 12.1 中 提 到 的 技术 也 只 是 当下 市 面 上 技术 世界 的 冰山 一 角 ， 但 极 幸运 的 是 ， 
这 些 技术 几乎 都 是 开源 的 。 

前 端 工程 师 们 可 以 说 生 在 了 一 个 好 时 辰 。 几 乎 你 缺少 什么 东西 ， 就 能 在 开源 世界 里 发 
现 你 需要 的 东西 一 一 而 且 往往 还 不 止 一 个 。 


12.4.2. 因地制宜、 量体裁衣 


我 们 在 具体 讲解 上 述 技术 之 前 ， 有 必要 向 读者 强调 一 点 ， 选 用 具体 技术 或 者 解决 方案 
时 一 定 要 因地制宜 、 量 体裁 衣 。 

技术 选 型 绝对 是 个 技术 活 ， 你 除了 需要 考虑 技术 本 身 的 成 熟 度 、 社 区 力量 和 适用 场景 
等 ， 还 需要 研究 自己 应 用 的 规模 、 兼 容 性 ， 自 己 团队 的 水 平 、 和 迭代 周期 等 因素 。 

下 面 我 们 就 详细 说 说 技术 选 型 具体 需要 考虑 的 因素 以 及 为 什么 要 考虑 它们 很 多 东西 
在 后 端 也 适用 )。 

1. 技术 成 熟 度 


一 项 技术 是 否 成 熟 , 决定 了 你 的 应 用 是 否 稳定 。 特别 新 的 技术 通常 意味 着 缺乏 稳定 性 ， 
在 需要 保证 正确 性 和 稳定 性 的 场景 (比如 面向 金融 或 者 面向 数量 巨大 的 最 终 用 户 的 应 用 )， 
选择 新 技术 时 一 定 要 慎重 再 慎重 , 对 于 一 些 不 关键 的 容错 性 高 的 场景 (比如 内 部 系统 )， 选 
择 新 技术 的 风险 就 会 小 很 多 。 

2. 文档 


由 于 程序 员 基 本 都 是 由 人 类 构成 ， 因 此 文档 好 坏 基 本 上 制约 着 程序 员 的 工作 效率 。 无 
论 你 看 到 某 项 技术 吹 的 再 天 花 乱 险 ， 请 一 定 记 得 看 看 它 的 文档 是 否 健全 优雅 ， 示 例 是 否 清 
晰 易 懂 ， 和 否则 当 你 发 现 有 坑 时 ， 说 不 定 你 已 经 踩 进去 了 。 

3. 适用 场景 


不 同 种 类 的 技术 工具 一 定 有 它 适 用 的 针对 性 场景 ， 即 便 是 号 称 “ 大 一 统 ” 和 “全 能 ” 
的 框架 型 技术 ， 也 有 它 所 不 适用 的 地 方 ， 比 如 YU 功能 齐全 ， 但 在 短平快 的 广告 页 宣传 页 
使 用 它 就 显得 杀 鸡 用 牛刀 了 ， 同 理 ， 目 标 相 似 的 技术 也 会 有 不 同 的 地 方 ， 在 这 方面 必须 要 
结合 你 自己 的 应 用 具体 情况 来 分 析 。 比 如 sugarjs 和 underscorejjs 都 是 用 于 对 原生 JavaScript 
对 象 提供 实用 函数 ，sugar 就 能 提供 更 加 “直觉 式 ” 的 编程 体验 ， 而 underscore 则 对 于 混合 
编程 环境 提供 了 sugar 无 法 提供 的 冲突 处 理 。 

4. 应 用 规模 

如 果 你 的 应 用 代码 规模 很 大 ， 你 不 得 不 考虑 组 织 代码 的 方式 ， 是 选择 模块 化 
(CMD/AMD) 还 是 用 继承 树 (closure library) ? 打包 工具 、 压 缩 工具 和 校 验 工具 这 些 东 西 


随 着 应 用 规模 的 上 升 都 不 得 不 逐渐 提 上 你 的 日 程 ， 一 项 技术 是 否 满足 打包 压缩 模块 化 等 需 
求 ， 也 是 你 需要 考虑 的 地 方 。 
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5. 学 习 曲 线 


学 习 曲 线 通常 是 工程 师 或 者 工程 师 头 儿 在 技术 选 型 时 经 常 忽略 的 地 方 。 比 如 在 你 自己 
非常 了 解 一 项 技术 A 时 , 经 常会 选择 它 或 者 与 它 相关 的 技术 , 而 忽略 和 你 合作 的 人 对 A 的 
认 知 情况 。 由 于 学 习 一 项 技术 总 是 需要 时 间 ， 因 此 对 于 整个 团队 而 言 ， 学 习 曲 线 陡峭 的 技 
术 很 可 能 成 为 开发 效率 的 杀手 ， 而 作为 技术 选 型 者 自己 却 很 难 意识 到 。 但 另 一 方面 ， 学 习 
曲线 陡峭 的 技术 通常 来 是 较 革 新 的 ， 并 且 从 长 期 来 看 是 高 效率 的 ， 因 此 如 果 你 的 应 用 是 一 
个 长 期 不 断 维护 的 项 目 ， 尝 试 较 革 新 的 能 反映 技术 趋势 的 工具 也 未 尝 不 可 。 


6. 社区 力量 


如 果 你 是 开源 运动 的 忠实 拥护 者 (或 者 说 你 是 没 那 么 多 钱 寻 求 技 术 支 持 的 穷人 )， 那 
么 一 项 技术 的 社区 力量 是 否 强大 很 大 程度 影响 了 你 踩 了 坑 是 否 有 人 帮 你 。jQuery 之 所 以 如 
此 流行 ， 也 离 不 开 社 区 的 力量 ， 无 数 人 在 为 jQuery 贡献 教程 、 跑 测试 和 报 bug， 在 论坛 里 
或 问答 网 站 里 解答 具体 的 问题 …… 如 果 你 不 幸 选 择 了 一 项 没有 社区 支持 甚至 作者 本 人 都 不 
响应 的 开源 技术 ， 那 么 遇 到 问题 的 时 候 你 就 可 以 去 买点 手纸 抹 泪 吧 。 

同样 地 ， 如 果 你 自己 在 开发 或 维护 某 个 开源 项 目 ， 那 么 除了 写 代 码 ， 培 育 其 社区 也 是 
极其 重要 的 工作 。 

7. 技术 缺点 


所 有 的 技术 都 有 缺点 〈 人 也 适用 )， 做 决定 前 ， 一 是 要 认 清 这 项 技术 的 缺点 ， 二 是 要 
考虑 你 是 否 能 接受 它 的 缺点 (就 像 婚 恋 一 样 )。 

8. 团队 水 平 

这 个 说 起 来 让 人 很 难堪 ， 但 你 不 得 不 承认 任何 团队 中 的 人 员 水 平 都 是 有 高 有 低 的 ， 一 
个 团队 的 平均 水 平 也 是 有 高 有 低 的 。 如 果 一 项 技术 过 于 简单 ， 而 团队 水 平 又 非常 高 ， 很 可 
能 出 现 重 造 轮子 甚至 辱骂 源 作 者 这 样 的 事 儿 ， 而 相反 在 选用 技术 过 于 复杂 团队 水 平 不 高 的 
情况 ， 则 非常 容易 出 现 误 用 乱用 最 后 导致 代码 不 可 维护 的 情况 出 现 。 

9. 兼容 性 

对 于 前 端 开发 人 员 来 讲 兼 容 性 尤其 重要 ， 几 乎 所 有 前 端 技术 都 会 提供 一 个 兼容 性 列 
表 ， 认 真 研 读 它 ， 并 和 你 自己 应 用 需要 兼容 的 浏览 器 和 设备 做 仔细 调研 对 比 ， 这 是 一 个 门 
当 户 对 的 问题 ， 光 有 爱情 是 不 够 的 。 

10. 迭代 周期 

通常 来 讲 ， 不 同 公司 的 产品 迭代 速度 是 有 很 大 差别 的 ， 这 种 节奏 对 技术 选 型 也 有 很 大 
影响 。 比 如 在 迭代 周期 慢 的 传统 软件 公司 ， 如 果 选 用 更 新 频繁 的 技术 ， 那 么 很 可 能 上 一 个 
版 本 的 应 用 中 出 现 的 bug 在 下 一 次 更 新 前 〈 通 常 是 几 个 月 的 时 间 ) 都 无 法 解决 ， 而 对 于 和 迭 
代 周 期 比较 快 的 互联 网 公司 影响 则 没 那么 大 。 和 迭代 周期 快 的 产品 对 较 新 的 更 新 频繁 的 技术 
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12.2 jQuery Mobile 


jQuery 是 Web 前 端 开 发 的 神器 , 整个 互联 网 有 50% 以 上 的 网 站 在 使 用 jQuery (多 么 可 
怕 的 占有 率 )，jQuery 已 经 成 为 Web 世界 里 的 事实 标准 一 一 其 被 熟知 程度 远 超 过 浏览 器 原 
生 API (DOM 和 Ajax)。 
jQuery 作为 Web 世界 的 瑞士 军刀 , 解决 了 许多 困扰 前 端 开 发 者 的 焦油 坑 ， 其 社区 衍生 
出 jQuery UI 项 目 成 为 了 绝 大 多 数 网 站 构建 UI 界面 的 首要 选择 。 随 着 移动 互联 网 的 兴盛 ， 
jQuery UI 逐 渐 暴 露出 其 不 合 时 宜 ，jQuery 社区 适时 推出 了 jQuery Mobile 项 目 ， 以 期 成 就 
-个 移动 设备 上 的 jQuery UI 项 目 。 


12.2.1 综述 


按照 官方 的 说 法 ，jQuery Mobile 是 一 个 构建 于 jQuery 之 上 触摸 屏 友好 的 HTML 5 UI 
框架 ， 并 可 工作 在 所 有 流行 的 智能 手机 、 平 板 和 桌面 平台 上 。 

jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all 
popular mobile, tablet and desktop platforms. 

jQuery Mobile 遵循 了 渐进 增强 (progressive enhancement). 和 响应 式 的 设计 原则 ， 用 
HTML 5 标签 来 驱动 其 UI 组 件 工作 , 并 提供 了 强大 的 API 供 你 进一步 自 定义 整个 框架 。 从 
视觉 上 来 说 ，jQuery Mobile 一 眼看 上 去 是 这 样子 的 : 


在 这 漂亮 的 外 壳 之 下 ，jQuery Mobile 继承 了 jQuery 的 策略 一 一 兼容 兼容 再 兼容 ! 
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jQuery Mobile 对 各 种 设备 的 兼容 程度 划分 了 三 个 等 级 ， 分 别 是 A、B 和 C， 而 移动 设 
LEGIS T E NEM NUM 
O A 级 : 所 有 特性 都 支持 一 一 漂亮 的 界面 和 Ajax 动画 导航 等 等 。 
Apple iOS 3.2*-6.1 
Android 2.1-2.3 
Android 3.2 (Honeycomb) 
Android 4.0 (ICS) 
Android 4.1 (Jelly Bean) 
Windows Phone 7.5-7.8 
Blackberry 6-10 
Blackberry Playbook (1.0-2.0) 
Palm WebOS (1.4-3.0) 
Firefox Mobile 18 
Chrome for Android 18 
Skyfire 4.1 
Opera Mobile 11.5-12 
Meego 1.2 


Tizen (pre-release) 


Samsung Bada 2.0 

UC Browser 

Kindle 3, Fire, and Fire HD 
Nook Color 1.4.1 

Chrome Desktop 16-24 

Safari Desktop 5-6 

Firefox Desktop 10-18 

Internet Explorer 8-10 

Opera Desktop 10-12 

B 级 : 包含 自 定义 组 件 ， 但 是 没有 Ajax 导航 。 
Blackberry 5.0* 

Opera Mini 7 

Nokia Symbian^3 

Internet Explorer 7 

C 级 : 只 有 最 基本 的 用 户 体验 。 
Internet Explorer 6 and older 
1OS 3.x and older 

Blackberry 4.x 

Windows Mobile 

其 他 所 有 手机 平台 


DoccoococooococooocoocoocoocoococccocoooococooococcocooovCccTo 
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看 到 这 长 长 的 兼容 列表 ， 大 家 恐怕 有 种 对 jQuery Mobile 的 团队 竖 起 大 拇指 的 冲动 了 ， 
jQuery Mobile 团队 在 开发 之 初 曾经 贴 过 一 张 他 们 所 持 有 测试 设备 的 高 清 无 码 大 图 ,在 此 我 
想 与 大 家 共享 和 共勉 一 下 ， 如 图 12.2 所 示 。 


图 12.2 在 2010 年 末 jQuery Mobile 测试 的 设备 


在 兼容 列表 如 此 牛 的 情况 下 ，jQuery Mobile 也 提供 了 极其 丰富 的 内 容 ， 其 中 包括 以 下 
的 内 容 。 


1. 页 面 和 对 话 框 (Pages & Dialogs) 


jQuery Mobile 中 一 个 “页 面 ” 其实 就 是 一 个 加 上 了 data-role="page" 属 性 的 元 素 ， 一 个 
page 里 面 还 可 以 包含 data-role 为 header、content 和 footer 的 “区 块 ”div， 当 然 也 可 以 包含 


其 他 任意 合法 的 HTML，jQueryMobile 之 所 以 抽象 出 “页 面 ” 这 个 单位 ， 是 为 了 配合 导航 
系统 行 工作 ， -个 HTML 文件 里 ， 可 以 包含 多 个 jQuery Mobile 的 页 面 ， 它 们 之 间 可 以 
自由 导航 。 


在 jQuery Mobile 里 还 可 以 将 一 个 页 面 “ 装 饰 ”成 一 个 对 话 框 。 
2. Ajax 导航 和 转 场 动画 


jQuery Mobile 一 个 Ajax 导航 系统 ， 可 以 通过 它 进行 无 刷新 切换 页 面 ， 并 在 切换 页 面 
时 触发 转 场 动画 ， 同 时 在 支持 HTML 5 history API 的 浏览 器 里 面 更 新 URL。 配 合 “ 返 回 ” 
按钮 可 以 做 到 高 保 真 模拟 iPhone 或 Android 的 切换 面板 效果 。 


3. 内 容 


对 于 内 容 排 版 ，jQuery Mobile 自 带 了 一 套 针对 移动 设备 优化 的 基础 样式 ， 标 题 、 段 落 
和 列表 等 标准 HTML 元 素 都 有 自己 适合 在 移动 设备 中 呈现 的 样子 。 
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4. 小 部 件 (Widgets) 


jQuery Mobile 包含 一 大 票 针对 触摸 屏 优化 过 的 UI 组 件 ， 这 些 东西 是 大 部 分 人 爱 上 
jQuery Mobile 的 主要 原因 。 这 其 中 包含 button、form、collapsibles、accordions、popups、 
dialogs 和 responsive tables 等 等 组 件 ， 另 外 jQuery Mobile 非常 易于 扩展 ， 在 互联 网 上 还 可 
以 找到 许多 有 用 有 趣 的 第 三 方 组 件 。 


5. 响应 式 设计 


整个 jQuery Mobile 都 是 响应 式 的 ， 布局、 小 部 件 和 网 格 系统 …… 几 乎 所 有 东西 都 是 从 
最 开始 时 就 按照 100% 可 响应 的 要 求 去 设计 的 。 


6. 主题 化 


jQuery UI 大 获 成 功 的 原因 之 一 就 是 非常 灵活 的 皮肤 系统 , 和 数 以 千 计 的 漂亮 且 免 费 的 
皮肤 供 大 家 随意 挑选 , jQuery Mobile 自然 不 能 放弃 这 一 秘诀 , jQuery Mobile 内 部 有 一 套 健 
壮 的 主题 化 系统 ， 在 同一 套 系统 中 支持 多 达 26 种 调 板 〈swatch)， 而 且 在 jQuery Mobile 还 
是 beta 版 时 ， 就 配套 开发 了 强大 的 themeroller 主题 制作 工具 ， 你 只 需要 拖 拖 鼠标 就 可 以 完 
成 自己 的 专属 主题 ， 如 果 你 连 鼠 标 都 懒得 动 ， 没 关系 ， 截 止 到 扎 稿 时 已 经 有 一 大 堆 免 费 的 
第 三 方 主题 可 以 选用 ， 总 有 一 款 适 合 你 。 


12.2.2 Hello, jQuery Mobile! 


在 程序 员 的 世界 里 ， 阐 明 一 项 技术 的 最 佳 方式 是 写 一 个 Hello World 程序 一 一 jQuery 
Mobile 也 不 例外 ， 先 来 看 一 个 最 简单 的 jQuery Mobile 驱动 的 界面 : 


«html» 
<head> 
<link rel="stylesheet" href="../assets/jquery.mobile.css"> 
</head> 
<body> 
<div id="home-page" data-role="page"> 
<div data-role="content"> 
<h1>Hello, </h1> 
<h2>jQuery Mobile! </h2> 
</div> 
</div> 
<!-- 别 忘 了 引入 jQuery --» 
<script src-"../../jquery.js"»«X/script» 
<script src-"../assets/jquery.mobile.js"»«/script» 
</body> 
</html> 


AE: 和 jQuery UI 类 似 ，jQuery Mobile 只 有 两 个 文件 : jquery.mobile.css 和 jquery. 
mobilejs， 这 样 设计 的 目的 一 是 让 使 用 者 尽 可 能 方便 地 获取 ， 二 是 让 CDN 服务 
器 可 以 很 容易 进行 分 发 。 后面 我 们 会 讲 到 jQuery Mobile 分 模块 打包 下 载 的 功能 。 


最 后 的 效果 如 图 12.3 所 示 。 
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Hello, 


jQuery Mobile! 


图 12.3 Hello, jQuery Mobile 


从 直观 效果 上 看 ， 变 化 不 大 ， 基 本 上 就 是 为 页 面 加 了 背景 色 (#DDD)， 加 了 一 些 文字 
阴影 ,一 些 重 置 用 的 边 距 ,不 过 jQuery Mobile 在 内 部 的 确 做 了 很 多 事情 ,来 看 看 审查 元 素 
的 结果 ， 如 图 12.4 所 示 。 


v<html class="ui-mobile"> 
v «head» 
«base href-"http://localhost:8000/ch5/iqm/jqmi.html"» 
«link rel="stylesheet" href-"../assets/iquery.mobile.css"» 
«style type-"text/css"»«/style» 
«title»«/title» 
</head> 
v «body class-"ui-mobile-viewport ui-overlay-a"> 
v«div id-"home-page" data-role-"page" data-url-"home-page" tabindex-"Q" 
class-"ui-page ui-page-theme-a ui-page-active" style-"min-height: 802px;"» 
v«div data-role-"content" class-"ui-content" role-"main"» 
«hi»Hello, «/hi» 
«h2»jQuery Mobile! </h2> 
</div> 
</div> 
<! 一 别 忘 了 引入 jQuery 一 > 
«script src=",,./,../iquery.is"></script> 
i ./assets/iquery.mobile.js"»«/script» 
v«div class-"ui-loader ui-corner-all ui-body-a ui-loader-default"» 
«span class-"ui-icon-loading"»«/span» 
«hi»loadingc/hi» 
«/div» 
</body> 
</html> 


图 12.4 Hello 例子 的 内 部 


可 以 看 到 , jQuery Mobile 将 html 元 素 加 上 了 ui-mobile 的 class, body 元 素 则 被 定义 为 
视 口 元 素 (ui-mobile-viewport)， 这 些 class 的 目的 是 为 了 设置 页 面 的 高 度 充斥 整个 屏幕 ， 
这 样 可 以 让 页 面 更 像 一 个 原生 APP. 

在 head 元 素 里 面 增加 的 base 元 素 主 要 用 于 Ajax 导航 ， 它 存储 了 当前 应 用 当前 状态 的 
一 个 基地 址 。 后 续 的 导航 可 能 会 基于 此 地 址 进行 计算 。 

jQuery Mobile 都 会 自动 侦 测 所 有 带 有 data-role 属性 的 元 素 , 然后 将 它们 变 成 它们 应 该 
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有 的 样子 一 一 这 是 jQuery Mobile 的 核心 机 制 之 一 : 基于 HTML 5 data- 属 性 驱动 的 UI 库 。 
被 驱动 的 元 素 通常 会 加 上 一 些 class 以 改变 其 样式 ， 如 果 是 一 些 复杂 的 组 件 〈 比 如 表单 元 
素 )， 还 可 能 改变 其 DOM 结构 。 

在 jQuery Mobile 中 和 样式 相关 的 class 都 以 ui- 开头 ， 可 以 看 到 许多 class 后 面 还 带 有 
后 级 -a， 这 个 a 表示 调 板 种 类 ， 你 可 以 自 定 义 调 板 a~z， 一 共 26 个 。 

在 页 面 的 最 后 ，jQuery Mobile 还 插入 了 一 个 隐藏 的 loader 元 素 ， 当 在 使 用 Ajax 加 载 
其 他 页 面 时 ， 这 个 loader 会 自动 出 现 ， 然 后 转 啊 转 的 。 

如 果 你 有 较 丰 富 的 jQuery UI 开发 经 验 ， 你 已 经 能 猜 出 整个 jQuery Mobile 大 致 的 工作 
方式 了 ， 接 下 来 的 章节 里 面 ， 就 让 我 们 深入 jQuery Mobile 一 探究 竟 。 


12.2.3 页 面 (Pages) 


data-role="page" 的 元 素 定义 了 jQuery Mobile 中 的 一 个 “页 面 ”( 后 文中 直接 称 之 为 
page), page 是 jQuery Mobile 中 最 主要 的 交互 单位 ， 它 主要 用 来 把 内 容 组 织 成 合乎 逻辑 的 
视图 ， 这 些 视图 之 间 可 以 互相 导航 。 

通常 来 说 ， 一 个 HTML 文档 就 是 一 个 page，Ajax 导航 系统 会 在 需要 的 时 候 加 载 其 他 
page 的 内 容 ， 然 后 在 用 户 导 航 到 特定 page 时 将 page 的 内 容 直 接 插入 到 当前 DOM Fo 
然 你 也 可 以 在 一 个 HTML 文档 中 包含 多 个 pages jQuery Mobile 会 以 动画 方式 在 page 视图 
之 间 进 行 过 渡 。 

jQuery Mobile 建议 使 用 HTML 5 的 doctype， 这 样 可 以 充分 利用 jQuery Mobile 提供 的 
全 部 特性 一 一 而 且 对 于 老式 浏览 器 也 能 完全 兼容 : 

«!DOCTYPE html» 


新 建 一 个 jQuery Mobile 的 页 面 需要 引入 jQuery 和 jQuery Mobile 的 主 文件 ,以 及 jQuery 
Mobile 的 主题 css 文件 ， 你 可 以 像 前 文 那样 去 官方 网 站 下 载 打 包 后 的 文件 ， 也 可 以 从 其 开 
源 项 目 中 构建 自己 的 版 本 ， 当 然 也 可 以 从 jQuery 自 建 的 CDN 里 获取 : 


<!DOCTYPE html» 
<html> 
<head> 
<title>Page Title</title> 
<!-- viewport meta 标签 对 于 移动 设备 来 讲 很 重要 ， 不 要 忘 了 --> 
<meta name-"viewport" content-"width-device-width, initial-scale-1"» 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.3.1/jquery. 
mobile-1.3.1.min.css" /> 
</head> 
<body> 


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script 
src="http: //code. jquery .com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></ 
script> 
</body> 
</html> 


在 body 元 素 里 面 ， 我 们 需要 将 page 元 素 放置 进去 ， 通 常 我 们 会 使 用 div 这 样 没 有 特 
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别 语义 的 容器 元 素 ， 然 后 为 其 加 上 data-role="page" 属 性 : 
<div data-role-"page"» 
ES 
在 page 容器 里 ， 所 有 合法 的 HTML 都 可 以 使 用 ， 不 过 对 于 一 个 典型 的 jQuery Mobile 
page， 里 面 通常 还 包含 header、content 和 footer 元 素 ， 它 们 可 以 使 用 HIML 5 里 面 的 相应 
元 素 〈 没 有 content)， 但 是 一 般 情 况 下 还 是 建议 使 用 div: 
<div data-role-"page"» 
«div data-role-"header"5...«/div» 
<div data-role-"content"»5...«/div» 


<div data-role-"footer"»...«/div» 
«/div» 


header. content 和 footer 在 jQuery Mobile 里 会 呈现 特别 的 样式 ， 默 认 情 况 下 如 图 12.5 
所 示 。 


1:40 AM 


这 里 是 content 


这 里 是 footer... 


图 12.5 默认 header 等 元 素 样式 


不 过 ， 正常 情况 下 是 建议 在 header 和 footer 元 素 里 使 用 h 标签 来 表示 具体 的 标题 或 者 
脚注 : 
<div data-role-"page"» 
<div data-role-"header"» 
<h1> 这 里 是 header</h1> 
«/div» 
<div data-role-"content"» 
这 里 是 content 
«/div» 
«div data-role-"footer"» 
<h4> 这 里 是 footer...«/h4» 
«/div» 
«/div» 
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这 时 候 jQuery Mobile 会 为 它们 加 上 特定 的 heading 样式 (文字 居中 和 一 些 边 距 )， 如 
图 12.6 所 示 。 


1:55 AM 
这 里 是 header 


这 里 是 header 


这 里 是 content 


这 里 是 footer... 


图 12.6 heading 样式 


到 目前 位 置 ， 你 眼 里 的 jQuery Mobile 可 能 只 是 利用 data- 属 性 加 了 一 点 样式 而 已 ， 其 
实 远 远 不 止 。 我 们 来 看 一 个 HTML 包含 多 个 page 的 情况 : 


<!DOCTYPE html» 
<html> 
<head> 
«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
«meta charset-"utf-8"» 
<link rel="stylesheet" href-"../assets/jquery.mobile.css"» 
</head> 
<body> 
<div data-role="page" id="foo"> 
<div data-role="header"> 
<h1>Foo</h1> 
«/div» 
<div data-role-"content"» 
<p> 第 一 个 页 面 : foo«/p» 
<p> 跳 转 至 <a href="#bar">bar</a></p> 
</div> 
<div data-role="footer"> 
<h4>foo Footer</h4> 
</div> 
</div> 


<div data-role-"page" id="bar"> 
<div data-role="header"> 
<h1>Bar</h1> 
«/div» 
<div data-role-"content"» 
<p> 第 二 个 页 面 : bar«/p» 
<p> 返 回 到 «a href="#foo">foo</a> 页 面 </p> 
</div> 
<div data-role-"footer"» 
Xh4»bar Footerc/h4» 
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«/div» 
«/div» 
«script src-"../../jquery-js"»«/script» 
«script src-"../assets/jquery.mobile.js"»«/script» 
</body> 
</html> 


当 文档 加 载 时 ， 只 有 foo 会 显示 ， 而 bar 这 个 元 素 会 整个 儿 隐 藏 ， 只 有 通过 单 击 跳 转 
至 #oo 或 者 直接 访问 类 似 /index.html#bar 这 样 带 锚 点 的 链接 才 会 显示 bar 这 个 page。 在 最 
新 稳定 版 中 默认 以 淡 入 淡出 (fade) 方式 切换 两 个 page。 

jQuery Mobile 使 用 了 hash 和 元 素 id 来 管理 page， 意 味 着 页 面 上 利用 锚 点 跳 转 至 页 面 
元 素 的 默认 功能 将 失效 ， 而 且 同 时 意味 着 在 单个 文档 里 page 元 素 的 id 属性 必须 唯一 ， 如 
果 你 启用 了 Ajax 导航 ， 那 么 在 整个 站 点 里 page 的 id 都 应 该 是 唯一 的 。 其 原因 是 jQuery 
Mobile 在 导航 时 会 把 所 有 “导航 至 ”的 页 面 和 页 面 里 的 page 元 素 都 加 入 当前 的 DOM 中 。 
虽然 上 面 的 页 面 HTML 结构 (page. header, content 和 footer) 是 对 于 标准 的 jQuery 
Mobile 应 用 而 言 是 官方 推荐 的 编写 方式 ， 但 是 jQuery Mobile 本 身 非 常 灵 活 ， 文 档 结 构 可 
以 做 到 非常 自由 ，header、content 和 footer 的 data-role 都 是 可 选 的 结构 型 组 件 〈 提 供 了 一 
些 格式 化 样式 )， 甚 至 对 于 单个 page 的 文档 ，data-role="page" 都 不 是 必须 的 一 一 如 果 你 的 
body 元 素 里 面 没 有 data-role="page" 的 元 素 , 那么 jQuery Mobile 会 把 所 有 body 里 的 元 素 包 
庄 到 一 个 page 元素 (div) 里 面 : 


<!DOCTYPE html» 
«html» 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="../assets/jquery.mobile.css"> 
</head> 
<body> 
<div> 
a page without <code>data-role="page"</code> 
</div> 
<script src-"../../jquery.js"»«/script» 
<script src-"../assets/jquery.mobile.js"»«/script» 
</body> 
</html> 


这 个 页 面 最 终 的 浏览 器 里 的 DOM 结构 如 图 12.7 所 示 。 


v<html class="ui-mobile"> 
» <head>..</head> 
v<body class-"ui-mobile-viewport ui-overlay-a"» 
v«div data-role-"page" data-url-"/ch5/jqm/jqm4.html" tabindex-' 
class-"ui-page ui-page-theme-a ui-page-active" style-"min-height: 
802px;"» 
v «div» 


a page without " 
«code»data-role-"page"-/code» 
</div> 
</div> 
Y<div class-"ui-loader ui-corner-all ui-body-a ui-loader-default"> 
«span class-"ui-icon-loading"»«/span» 
«hi»loading-/hi- 
</div> 


图 12.7 AJUE page 
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要 注意 的 是 ， 在 自动 包 庄 body 里 的 元 素 时 ，jQuery Mobile 会 使 用 jQuery 的 wrapAll 
方法 来 实现 , 该 方法 会 寻找 被 包 庄 的 元 素 里 的 script 标签 ， 并 使 用 XHR 加 载 每 个 标签 的 脚 
本 ， 如 果 你 的 script 放置 在 body 元 素 里 面 ， 会 导致 脚本 被 加 载 两 次 : 


<script src="../assets/jquery.mobile.js"></script> 
<script src="test.js"></script> 

</body> 

</html> 

test.js: 


console.log ('test.js loaded!') 


最 终 效 果 如 图 12.8 所 示 。 


© Elements Resources Network 
test.js loaded! 
test.js loaded! 

> 


图 12.8 body 中 script 加 载 两 次 


NT 行为 会 导致 意外 的 错误 ， 因 此 官方 强烈 建议 在 使 用 时 显 式 添加 data-role-"page" H 

" 了 提升 jQuery Mobile Ajax 导航 的 感知 速度 ， 预 加 载 是 个 很 必要 的 优化 方式 , jQuery 
Mobile 原生 提供 了 预 加 载 page 的 方案 , 要 预 加 载 page 很 简单 ， 只 用 对 指向 目标 page 的 链 
接 加 上 data-prefetch="true" 属 性 : 


<a href-"/target.html" data-prefetch="true"> 神 速 加 载 页 面 </a> 


除了 data-prefetch 属性 ， 你 也 可 以 使 用 编程 方式 预 加 载 一 个 page: 
$.mobile.loadPage(pageUrl, ( showLoadMsg: false ]) 


下 面 介 绍 下 DOM 缓存 内 容 。 

在 DOM 中 保存 大 量 的 page 会 导致 浏览 器 内 存 占 用 急剧 增长 ,这 会 导致 页 面 性 能 下 降 
甚至 页 面 崩 涉 ， 对 于 资源 匮乏 的 移动 浏览 器 来 说 更 不 能 忍 ，jQuery Mobile 使 用 了 动态 加 载 
页 面 到 当前 DOM 树 的 方式 实现 导航 ， 因 此 内 存 形势 对 jQuery Mobile 应 用 来 说 尤为 严峻 ， 
还 好 jQuery Mobile 提供 了 一 种 简单 的 机 制 来 保持 DOM 树 的 整洁 。 这 种 机 制 的 核心 在 于 ， 
无 论 你 何 时 使 用 Ajax 加 载 一 个 page， jQuery Mobile 都 会 将 这 个 page 标记 为 在 下 一 次 导航 
发 生 时 (或 者 说 在 pagehide 事件 触发 时 ) 应 该 从 DOM 中 移 除 的 对 象 ， 如 果 你 之 后 再 次 访 
问 这 个 page, jQuery Mobile 将 不 知道 是 否 访问 过 该 page， 上 有 具体 的 HTML 是 从 浏览 器 缓存 
里 面 取 还 是 从 远程 服务 器 取 ， 这 都 由 浏览 器 自己 来 决定 。 

当然 ， 你 也 可 以 通过 编程 方式 将 导航 前 的 page 保留 在 当前 DOM 中 ,这 样 会 占用 多 一 
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点 内 存 ， 但 是 如 果 你 返回 至 原 page 时 就 会 来 的 飞快 : 

// 默 认 保存 前 一 个 Page 

$.mobile.page.prototype.options.domCache = true 

在 某 些 情况 下 你 可 能 希望 保留 某 个 特定 的 page〈 高 频 访问 的 主 面板 /通知 面板 )， 你 可 
以 使 用 下 面 的 方式 来 缓存 住 指定 的 page: 


<div data-role-"page" data-dom-cache-"true" id-"foobar" > 


</div> 
如 果 你 想 缓存 所 有 访问 过 的 page〈 强 烈 不 建议 这 样 做 )， 可 以 这 样 : 
pageContainerElement.page(( domCache: true ]); 


要 注意 的 是 ，jQuery Mobile 永远 不 会 将 第 一 个 页 面 的 DOM 移 除 ， 而 只 会 移 除 通 过 
Ajax 加 载 的 page 〈 这 意味 着 单 文档 多 page 的 页 面 不 会 受 该 机 制 的 影响 )。 


12.24. Ajax 导航 模型 和 转 场 动画 (transitions) 


jQuery Mobile 之 初 在 很 大 程度 上 模拟 iOS 体验 (实际 上 Android 最 初 也 是 这 样 )， 除 
了 适合 手指 点 击 的 列表 和 按钮 ， 应 用 不 同 视 图 的 动画 切换 必然 也 是 标 配 ， 很 多 人 就 是 被 
jQuery Mobile 华丽 的 高 仿 10S 的 切换 动画 惊艳 且 吸 引 的 。 

由 于 Web 浏览 器 本 身 在 切换 页 面 时 并 不 会 有 动画 切换 效果 ， 因 此 要 做 到 页 面 〈 视 图 ) 
间 的 动画 切换 效果 有 两 个 方式 ， 一 是 将 整个 应 用 编写 为 单 页 应 用 ， 所 有 视图 都 在 当前 文档 
内 展现 ， 这 样 你 可 以 通过 控制 DOM (的 CSS) 来 实现 任何 你 需要 的 动画 效果 ， 还 有 一 种 
方法 是 阻止 掉 页 面 所 有 超 链接 默认 行为 〈 跳 转 )， 然 后 使 用 Ajax 方式 将 链接 指向 的 页 面 全 
部 内 容 加 载 到 当前 DOM 中 。 由 于 前 者 对 开发 者 要 求 很 高 ，jQuery Mobile 必须 要 走 好 简单 
易 上 手 的 路 线 ，jQuery Mobile 因此 采用 了 Ajax 加 载 整个 页 面 的 方式 来 模拟 页 面 切 换 。 

jQuery Mobile 内 建 了 一 套 Ajax 导航 系统 ， 并 随 之 附 赠 了 一 套 丰 富 的 page 转 场 动画 效 
果 。 这 套 系统 劫持 Chijacking) 了 标准 链接 的 跳 转 行为 和 表单 的 提交 行为 ， 并 将 其 转换 为 
Ajax 调用 ， 同 时 也 支持 类 似 iOS 的 “返回 ”按钮 。 对 于 高 级 用 户 而 言 ， 预 加 载 、 缓 存 、 动 
态 插 入 和 脚本 执行 等 jQuery Mobile 也 有 自己 的 支持 方案 。 

具体 实现 细节 上 ，jQuery Mobile 会 在 页 面 跳 转 或 表单 提交 时 支持 掉 其 事件 ， 然 后 根据 
发 出 事件 的 链接 的 href 属性 或 者 form 表单 的 action 属性 发 起 Ajax 请 求 ， 并 在 等 待 请 求 返 
回 时 插入 一 个 这 样 的 加 载 指示 如 图 12.9 所 示 。 


图 12.9 loader 
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当 请 求 完成 后 ，jQuery Mobile 会 解析 加 载 回 来 的 文档 ， 并 将 其 中 data-role=page 的 元 
素 插入 到 原始 的 DOM 当中 ， 接 下 来 对 page 中 的 组 件 进行 初始 化 。 要 注意 的 是 ， 加 载 回 来 
的 文档 的 剩余 部 分 都 会 被 抛弃 ， 包 括 引 用 的 脚本 、 样 式 和 其 他 部 分 。 另 外 ，jQuery Mobile 
会 自动 更 新 标签 页 的 标题 。 

此 时 请 求 的 page 已 经 完全 加 载 到 了 当前 文档 ， 但 是 这 个 page 还 没有 真正 显示 ， 它 会 
在 加 载 完全 之 后 以 动画 方式 进入 页 面 视 口 。 默 认 情 况 下 是 以 淡 入 淡出 Cade) 的 方式 转 场 ， 
如 果 你 需要 自 定义 动画 效果 ， 可 以 为 目标 链接 元 素 设置 一 个 data-transition 属性 : 

Xa href-"index.html" data-transition="pop"> 点 我 会 弹出 新 页 面 </a> 


jQuery Mobile 提供 了 许多 page 切换 动画 效果 ， 如 下 所 示 。 
口 fade: 淡 入 淡出 ; 
pop: 弹出 ; 
flip: 翻转 ; 
tum: 华丽 的 翻转 ; 
slide: 滑动 ; 
slideup: 向 上 滑动 ; 
slidedown: 向 下 滑动 ; 
slidefade: 滑动 渐变 ; 
flow: 华丽 的 滑动 〈 先 缩小 ， 然 后 滑动 ， 再 放大 ) ; 
口 none: 什么 也 没有 。 
苍白 的 文字 是 无 法 表现 动画 的 动感 ， 读 者 可 以 参看 jQuery Mobile 官方 demo 
(http://view.jquerymobile.com/1.3.1/dist/demos/widgets/transitions/) ， 以 实际 体会 一 下 。 
jQuery Mobile 的 很 多 动画 采用 CSS 3D transform 撰写 ， 对 于 不 支持 的 浏览 器 ，jQuery 
Mobile 会 自动 将 不 支持 的 动画 特效 fallback 至 fade 效果 。 
以 上 jQuery Mobile 实现 的 动画 效果 都 有 其 “ 道 效 果 ”， 比 如 左 滑 的 逆 效 果 是 右 滑 、 顺 
时 针 翻 转 的 逆 效 果 是 逆 时 针 翻 转 等 等 ， 在 单 击 “ 返 回 ” 按 钮 或 者 浏览 器 的 返回 时 会 以 导航 
至 该 页 面 动画 效果 的 “ 逆 效 果 ” 切 换 至 前 一 个 页 面 。 如 果 你 需要 手工 指定 “ 逆 效果 ” 可 以 
使 用 data-direction="reverse" 属 性 : 
Xa href-"index.html" data-transition-"slideup" data-direction="reverse"> 
点 我 会 slidedown</a> 
另外 ， 你 还 可 以 通过 defaultPageTransition 来 全 局 配置 默认 page 转 场 效果 ， 
defaultDialogTransition 配置 对 话 框 转 场 效果 : 


$ (function() ( 
$.mobile.defaultPageTransition = 'slide"' 
$.mobile.defaultDialogTransition - 'none' 


1) 


由 于 各 个 浏览 器 对 CSS 3D transform 的 支持 参差 不 齐 ，jQuery Mobile 对 每 一 种 过 渡 动 
画 都 提供 手动 指定 fallback 动画 的 接口 : 
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$.mobile.transitionFallbacks.slideout = "none" 


基于 性 能 方面 的 考虑 ， 当 page 的 滚屏 高 度 大 于 三 倍 设备 屏幕 的 高 度 时 ，jQuery Mobile 
会 自动 禁用 动画 转 场 ， 另 外 你 还 可 以 设置 在 窗口 宽度 大 于 某 个 值 时 禁用 动画 〈 同 样 基于 性 
能 考虑 ): 


$.mobile.maxTransitionWidth = 1000 // 默 认 是 false 


jQuery Mobile 甚至 支持 你 通过 $.mobile.transitionHandlers 选项 来 自 定义 动画 。 

jQuery Mobile 的 导航 系统 中 有 前 面 介绍 过 的 Historyjs 类 似 的 API， 比 如 
$.mobile.navigate 方法 可 以 动态 修改 URL (使 用 Hash 或 者 HTML 5 history API), 其 原理 也 
是 通过 popstate 或 hashchange 事件 来 实现 。 默 认 情 况 下 的 导航 就 使 用 了 该 方法 ， 当 然 你 也 
可 以 通过 此 方法 自己 定制 导航 行为 。 

拿 实际 例子 来 说 ， 比 如 你 要 编写 一 个 微 博客 户 端 程序 ， 可 能 在 单 击 链接 时 需要 先 从 微 
博 API 处 请 求 JSON 数据 ， 然 后 将 获取 来 的 数据 更 新 到 界面 上 去 : 

// 页 面 上 所 有 的 链接 的 click 事件 都 要 绑 定 (为 了 性 能 可 能 在 实际 代码 中 使 用 委托 ) 


$('a').on('click', function(e) ( 


// 阻 止 默认 跳 转 行为 
e.preventDefault () 


// 根 据 a 标签 的 href 属性 改变 页 面 URL 

// 第 二 个 参数 存储 链接 上 的 数据 

$.mobile.navigate(this.attr('href'), { 
foo: this.attr('data-foo') 

}) 


// 页 面 的 内 容 改 变 基 于 具体 的 arl 
// 本 例 中 可 能 是 发 起 一 个 ajax 请 求 JSON 数据 并 泻 染 模板 
alterContent (this.attr('href')) 

)) 


调用 $.mobile .navigate 方法 后 会 触发 navigate 事件 〈 当 然 前 进 后 退行 为 也 会 触发 )， 当 
与 相应 navigate 事件 相关 联 的 数据 也 会 通过 事件 对 象 一 并 传 入 : 
// 在 window 上 绑 定 该 事件 
$(window).on('navigate', function(event, data) ( 
if (data.state.foo) ( 


// 接 口 和 HTML5 的 history API 相似 
} 


* 


if (data.state.direction -- 'back') { 
//direction 属性 表示 前 进 (forward) 还 是 后 退 (back) 
) 


alterContent (data.state.url) 
H) 
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12.2.5 UI 组 件 一 一 一 切 皆 响应 


在 前 面 的 章节 中 我 们 简单 介绍 了 响应 式 Web 设计 (Responsive Web Design， 下 文 简称 
RWD) 的 基本 要 素 和 实现 方案 ， 不 过 那些 内 容 都 是 小 打 小 冰 ,“ 响 应 ”程度 远 不 能 满足 工 
业 级 别 的 需求 。jQuery Mobile 为 了 兼容 尽 可 能 多 的 平台 和 设备 在 RWD 上 做 了 非常 多 的 工 
作 ， 包 括 许多 响应 式 组 件 如 responsive grid, reflow table 和 sliding panel 等 ，jQuery Mobile 
在 实现 这 些 响应 式 组 件 时 遵从 下 面 三 个 RWD 的 要 点 。 

O CSS media queries: 针对 不 同 设备 特性 应 用 不 同样 式 ， 样 式 可 能 是 基于 分 辨 率 ， 也 
可 能 是 基于 屏幕 宽度 断 点 。 
口 流 式 网 格 (fluid grid) : HTML 元 素 或 者 jQuery Mobile 的 组 件 在 fluid grid 系统 中 

都 是 以 相对 单位 定义 〈 百 分 比 ) ， 这 样 它 们 可 以 在 容器 里 自由 “流动 ”。 

O 响应 媒体 元 素 : 图 片 和 音 视频 这 些 元 素 同样 应 该 随 着 容器 的 变化 而 自动 适应 ， 秘 

诀 也 是 使 用 相对 单位 。 

正 是 因为 jQuery Mobile 让 所 有 的 元 素 都 可 响应 ， 这 样 media queries 可 以 专注 于 控制 
容器 的 布局 样式 。 

举例 来 说 ， 假 设 现在 两 个 充满 各 种 可 响应 内 容 的 容器 ， 在 屏幕 较 宽 的 情况 下 ，jQuery 
Mobile 会 将 两 个 容器 进行 浮动 ， 以 实现 两 列 布局 ， 而 对 于 较 窗 的 屏幕 ，jQuery Mobile 会 将 
两 个 容器 垂直 堆 共 起 来 一 一 这 和 我 们 之 前 提 到 的 响应 式 网 格 是 类 似 的 。 而 容器 中 的 元 素 通 
常会 使 用 相对 的 单位 来 定义 〈 比 如 相对 于 父 元 素 50% 的 宽度 )， 这 样 无 论 容 器 怎样 变化 ， 
这 些 元 素 都 能 够 很 好 地 适应 。 

自然 ， 在 使 用 jQuery Mobile 时 ， 你 也 应 该 时 刻 将 RWD 的 原则 与 实践 记 在 脑海 中 ， 具 
体 做 法 可 以 参见 这 些 技巧 : 

O 使 用 你 的 样式 来 覆盖 jQuery Mobile 而 非 反之 。 jQuery Mobile 包含 大 量 针 对 移动 设 

备 优化 的 基础 样式 ， 通 常 你 自己 的 样式 应 该 只 包含 一 些 样式 微调 。 

O 移动 优先 (mobile first)。 作 为 近 些 时 日 广泛 被 提起 的 设计 和 编码 理念 ,“mobile first" 
能 极 大 地 改善 你 的 开发 体验 ，jQuery Mobile 本 身 就 是 这 一 理念 的 忠实 拥护 者 。 践 
行 这 一 理念 的 秘诀 在 于 : 写 样 式 时 从 最 罕 的 屏幕 写 起 。 

O 屏幕 断 点 应 该 基于 内 容 ， 而 非 设备 。 几 乎 有 任何 你 能 想象 到 的 屏幕 宽度 在 市 面 上 
都 有 对 应 的 设备 ， 这 种 现状 意味 着 你 根本 无 法 完全 测试 你 的 应 用 ， 因 此 在 选择 断 
点 时 应 该 基于 你 的 内 容 在 设计 系统 下 看 起 来 是 什么 样子 的 ， 而 不 是 在 具体 某 种 设 
备 下 看 起 来 是 什么 样子 的 。 

O 撰写 media queries 时 使 用 em 作为 单位 。 使 用 em 的 好 处 在 于 在 字体 大 小 发 生 改变 
时 你 的 布局 也 能 轻松 自 适应 。 比 如 默认 的 字体 大 小 是 16px 的 情况 下 ，320px 屏幕 
宽度 的 断 点 就 应 该 是 20em (3203-16-20) 。 


12.2.0 ”UI 组 件 一 一 表单 元 素 
作为 一 个 UI 框架，UI 组 件 自 然 是 最 吸引 眼球 的 部 分 。 表 单 则 是 UIT 组件 中 最 基础 的 部 
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Text Input: 
Search Input: 


Native select: 


© Choices: 
Custo tii 
One 


Two 


K 12.10 表单 元 素 


EARED UN F: 


<!DOCTYPE html> 
<html> 
<head> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 


<link rel="stylesheet" href-"../assets/jquery.mobile.css"» 
</head> 


<body> 
<div id="home-page" data-role="page"> 
<div data-role="content"> 
<label for="textinput-2">Text Input:</label> 
<input type="text" name-"textinput-2" 
placeholder-"Text input" value-""» 
<label for-"search-2"»5Search Input:c«/label» 
<input type-"search" name-"search-2" id-"search-2" 
<label for-"select-native-2"»Native select:«/label» 
<select name-"select-native-2" id-"select-native-2"» 
<option value-"small"»One«/option» 
<option value-"medium"»Two«/option» 
<option value-"large"»Three«/option» 
</select> 
<label for="select-multiple-2">Custom multiple select:</label> 
<select multiple="multiple" data-native-menu=" false" name=" 
select-multiple-2" id="select-multiple-2"> 
<option valu: >Choices:</option> 
<option value="small">0ne</option> 
<option value="medium">Two</option> 


<option value="large">Three</option> 
</select> 


</div> 
</div> 
Scrip SE 
<SCeIDEESEC 


id-"textinput-2" 


value-""» 


./../jquery.js"»«/script» 
./assets/jquery.mobile.js"»«/script^ 
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</body> 
</html> 
可 以 看 到 在 jQuery Mobile 里 面 你 可 以 使 用 最 原始 的 表单 元 素 ， 但 jQuery Mobile 会 自 
动 将 它们 演 染 成 适合 移动 设备 的 样子 〈 通 过 增加 标签 和 样式 )， 然 后 将 原始 的 表单 隐藏 掉 ， 
如 图 12.11 所 示 。 


-anput-ueat uiruuuy-umetlt yi att ua-snaur 
Native select: 'arch-2"»Search Input:-/label- 
-input-search ui-body-inherit ui-corner-all ui-shi 
"select-native-2"»Native select:«/label» 
One o -select"»..«/div» 
lect-multiple-2"»Custom multiple select:</label> 


Custom multiple select: -—- 


</div> 
</div> 
<div class="ui-popup-screen ui-screen-hidden" id-"select-multiple 
» «div class-"ui-popup-container ui-popup-hidden" id-"select-multip 
</div> 


图 12.11 隐藏 原始 表单 


jQuery Mobile 里 几乎 所 有 组 件 都 是 以 这 种 方式 进行 演 染 增强 , 并 且 会 和 隐藏 的 表单 进 
行 关 联 ， 如 图 12.12 所 示 。 


sxtinput 


x ober="true">Choices: </option> 
arch Input: «option value-"small"»0nec/option» 
«option value-"medium"»Twoc/option» 
«option value-"large"»Threec/option» 
«/select» 
><div style="display: none;"».«/div» 
</div> 


ative select: 


id="select-multiple-2-listbox-screen"></div> 
ji-popup-active" id-"select-multiple-2-listbox-pop 


MET3IA iQuerv 一 > 
htmLui-mobile body.ui-mobile-viewport.ui-overlay-a — div&home-page.ui-page.ui-page-theme-a.ui 


$0. selectedüptions 
[<option values"small"»Onec/option», «option value-"large"»Three«/option»] 


图 12.12 表单 和 组 件 元 素 关联 


在 jQuery Mobile 构造 表单 要 注意 的 一 点 是 其 id 属性 必须 在 整个 应 用 中 都 保证 唯一 ， 
这 是 因为 jQuery Mobile 的 导航 系统 允许 多 个 page 存在 同一 个 文档 中 ， 因 此 在 任意 时 刻 你 
都 必须 保证 DOM 中 form 的 id 都 是 唯一 的 。 此 外 ， 你 的 表单 项 〈 比 如 文本 域 ) 最 好 都 有 
相应 的 label 元 素 (加 上 for 属性 )。 


1. button 

按钮 无 论 在 桌面 还 是 移动 甚至 人 类 的 日 常生 活 中 都 是 极其 重要 的 交互 元 素 ， 在 jQuery 
Mobile 中 按钮 是 核心 组 件 之 一 ， 它 同时 被 广泛 地 用 在 其 他 各 种 组 件 当中 。 创 建 一 个 按钮 非 
常 简 单 ， 使 用 标准 的 表单 元 素 或 者 button 元 素 即 可 ， 如 果 你 想 把 链接 变 成 button， 指 定 其 
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data-role="button" 即 可 : 


<a href-"£" data-role-"button"»Anchor«/a» 
«form» 
Xbutton»Button«c/button» 
<input type="button" value-"Input"» 
<input type="submit" value="Submit"> 
<input type="reset" value="Reset"> 
</form> 


效果 如 图 12.13 所 示 。 


Anchor 


Button 


Input 


Submit 


Reset 


图 12.13 按钮 


由 于 移动 设备 屏幕 通常 比较 窗 ， 因 此 jQuery Mobile 在 默认 情况 下 将 button 视 为 block 
元 素 ， 其 宽度 充满 父 元 素 。 如 果 你 想 要 以 inline 方式 显示 button， 不 需 用 单独 写 Css, H 


需要 加 上 data-inline="true" 即 可 : 


<p> 
<a href="#" data-role="button" data-inline="true">True</a> 
<a href="#" data-role-"button" data-inline="true">False</a> 
</p> 


效果 如 图 12.14 所 示 。 


» 


图 12.14 inline button 


n] 
o 
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jQuery Mobile 默认 为 一 个 主题 提供 五 种 调 板 ， 落 实 到 按钮 上 就 是 五 种 不 同 颜色 或 


FER: 


<p> 
<a 
<a 
<a 
<a 
<a 

</p> 


href="#" 
href="#" 
href-"g" 
href-"£" 
href="#" 


data-role-"button" data-theme-"a" 
data-role-"button" data-theme- 
data-role-"button" data-theme- 
data-role-"button" data-theme- 
data-role-"button" data-theme-"e" 


效果 如 图 12.15 所 示 。 


data-inline-"true"»A«/a» 
data-inline-"true"»B«/a» 
data-inline-"true"»C«/a» 
data-inline-"true"»D«/a» 
data-inline-"true"»E«/a» 


10:30 PM 


图 12.15 不 同调 板 的 按钮 


此 外 还 有 小 号 的 按钮 : 


<a href="#" data-role="button" data-inline="true"> 取 消 </a> 
<a href="#" data-role="button" data-mini="true" data-inline="true" data-theme="b"> 确 认 </a> 


效果 如 图 12.16 所 示 。 


11:00 PM 


图 12.16 data-mini-"true" 


此 外 ， 所 有 的 按钮 都 可 以 通过 data-icon 添加 图 标 〔 来 自 免费 版 的 Glyphish)， 并 通过 
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data-iconpos 设置 图 标的 位 置 : 


<a href="#" data-role-"button" data-icon-"arrow-l" data-iconpos-"left" 
data-inline="true"> 左 </a> 

<a href="#" data-role-"button" data-icon-"arrow-r" data-iconpos-"right" 
data-inline-"true"»4fi«/a» 

<a href-"£" data-role-"button" data-icon-"arrow-u" data-iconpos-"top" 
-"true"» l«/a» 

data-role-"button" data-icon-"arrow-d" data-iconpos-"bottom" 
data-inline-"true"» F«/a» 

<a href-"£" data-role-"button" data-icon-"delete" data-iconpos-"notext" 
data-inline="true"> 仅 包含 icon«/a» 

<a href="#"  data-role-"button"  data-mini-"true"  data-inline-"true" 
data-icon-"check" data-theme="b"> 确 认 </a> 


效果 如 图 12.17 所 示 。 


图 12.17 各 种 icon 的 按钮 


jQuery Mobile 的 icon 可 以 用 在 许多 组 件 里 (比如 listview)， 而 且 由 于 icon 本 身 是 半 
透明 的 黑色 ， 因 此 可 以 搭配 各 种 主题 。 默 认可 以 使 用 下 面 这 些 icon， 如 图 12.18 所 示 。 


© bars Q edit Q arrow- 
© arrow-r Q arrow-u © arrow-d 
© delete © plus Q minus 

© check © gear (9 refresh 
Q forward © back € grid 

© star €* alert O info 

Q home Q search 


图 12.18 默认 icon 
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如 果 自 带 的 icon 不 能 满足 你 的 需求 ， 你 也 可 以 定制 icon。 定 制 的 方法 是 在 你 自己 的 
CSS 里 面 定义 一 个 以 ui-icon- 为 前 绥 的 class， 并 配合 使 用 data-icon 属性 ，jQuery Mobile 会 
为 该 按钮 自动 加 上 该 icon: 


.ui-icon-myapp-email ( 
background-image: url( "app-icon-email.png" ); 
) 
/* 为 retina 屏幕 准备 的 版 本 */ 
(media only screen and (-webkit-min-device-pixel-ratio: 2) ( 
.-ui-icon-myapp-email ( 
background-image: url( "app-icon-email82x.png" ); 
background-size: 18px 18px; 
} 
j 


使 用 时 : 
<a href="#" data-role="button" data-icon="myapp-email"> 确 认 </a> 


对 于 多 个 功能 类 似 或 有 关联 的 按钮 ， 相 较 于 随意 排 布 而 言 成 组 排列 显然 是 更 好 的 方 
式 ，jQuery Mobile 支持 垂直 和 水 平 两 种 按钮 分 组 方案 : 


«div data-role-"controlgroup"» 
<a href="#" data-role="button"> 主 页 </a> 
<a href-"$" data-role="button"> 发 现 </a> 
<a href="#" data-role="button"> 关 于 </a> 
</div> 
«div data-role-"controlgroup" data-type-"horizontal"» 
<a href="#" data-role-"button"»Yes«/a» 
<a href-"4" data-role-"button"»No«X/a» 
<a href="#" data-role-"button"»Maybec/a» 
«/div» 


效果 如 图 12.19 所 示 。 


| 
主页 
| 发 现 
关于 


Yes No Maybe 


图 12.19 分 组 按钮 


到 目前 为 止 我 们 还 没 写 一 行 js 代码 就 拥有 了 各 种 奇 奇怪 怪 的 按钮 , 不 过 除了 在 HTML 
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里 通过 data- 属 性 控制 button 的 形态 或 者 行为 外 , 在 js 里 面 也 可 以 直接 访问 按钮 组 件 , 并 且 
更 多 地 控制 它 。 

-button 方法 和 buttonMarkup 方法 都 可 以 用 于 设置 任意 元 素 为 button 实例 〈 实 际 上 像 
div 这 样 的 元 素 最 好 不 要 变 成 button ): 

$('selector').button() 

S('selector').buttonMarkup() 

buttonMarkup 其 实 是 button 的 底层 方法 ， 要 注意 的 是 ， 使 用 这 些 方 法 将 非 表单 按钮 元 
素 如 链接 变 为 按钮 时 ， 表 单 的 的 一 些 方法 (enable、disable 和 refresh). 是 无 法 支持 的 。 
此 外 通过 js 还 可 以 设置 所 有 前 面 提 到 的 配置 项 : 


$('selector') .buttonMarkup ({ 
corners: false， // 圆 角 
ET 
iconpos: 'right', 
iconshadow: 'false', 
inline: true, 
mini: true, 
shadow: false, 
theme: 'a' 


}) 

此 外 ，jQuery Mobile 还 允许 你 配置 初始 化 该 组 件 的 选择 器 (默认 选择 器 是 button、 
[type=button]、[type='submit] 和 [type='reset] ): 

// 必 须 在 mobileinit 事件 中 配置 

$(document).on('mobileinit', function() { 


$.mobile.button.prototype.options.initSelector - '.myButton' 


) 


编程 方式 来 禁用 和 启用 按钮 也 不 成 问题 : 


$('#button-1') .button('disable') 
$('4button-1').button('enable') 


如 果 你 使 用 js 修改 了 原始 表单 元 素 ， 你 必须 调用 refresh 方法 更 新 样式 : 
S$('f£button-1').button('refresh') 

全 注意 : disable、enable 和 refresh 这 三 个 方法 几乎 所 有 的 表单 组 件 都 拥有 。 
如 果 你 在 按钮 被 泻 染 之 后 需要 做 什么 事情 ， 可 以 绑 定 元 素 的 buttoncreate 事件 : 
$('.selector').on('buttoncreate', function (event, ui)(]) 
也 可 以 通过 选项 传递 一 个 回调 进去 : 
$('.selector').buttonMarkup((í 


create: function(event, ui) {} 


) 


2. Sliders 


slider GHH) 实际 上 就 是 HIML 5 中 的 range input， 用 来 输入 某 个 范围 内 的 数值 ， 最 
基本 的 : 
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<label for="slider-1">Slider:</label> 


<input 


type-"range" name="slider-1" id="slider-1" min="0" max="100" 


value="50"> 


效果 如 图 12.20 所 示 。 


此 外 ，sl 
在 话 下 : 


<form> 
<labe 


«input type-"range" name-"slider-1" id-"slider-1" min 


value-" 


Slider: 


73 


图 12.20 基本 的 slider 


ider 还 包含 多 种 配置 项 ， 并 和 button 一 样 也 有 mini 版 本 ， 更 换 主题 调 板 也 不 


for-"slider-1"5Slider:«/label» 


"0" max-"100" 
50"» 


<!-- step 属性 也 支持 --» 


«labe 


for-"slider-10"»Slider:«/label» 


«input type-"range" name-"slider-10" id-"slider-10" min-"0" max-"10" 


step-". 


1" value-"5"» 


«!-- data-highlight 可 以 高 亮 已 选中 的 部 分 --» 


«labe 


for-"slider-2"»5Slider (default is "false"):«/label» 


«input type-"range" name-"slider-2" id-"slider-2" data-highlight-"true" 


min-"0" 


max-"100" value-"50"» 


<!-- data-theme 表示 滑 块 把 手 ，data-track-theme 表示 滑 条 --> 


«labe 


for-"slider-3"»Slider:«/label» 


<input type-"range" name-"slider-3" id-"slider-3" data-track-theme-"d" 
data-theme-"b" min-"0" max-"100" value-"50"» 

<!-- 小 巧 版 本 --> 

Xlabel for="slider-4">Slider:</label> 

<input type="range" name="slider-4" id="slider-4" data-mini="true" 


min-"0" 


max-"100" value-"50"» 


<! 禁用 滑 块 三 > 
<label for-"slider-5"»Slider:«/label» 
Xinput type-"range" name-"slider-5" id-"slider-5" disabled-"disabled" 


min-"0" 
«/form» 


max-"100" value-"50"» 


效果 如 图 12.21 所 示 。 
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Slider: 


73 


Slider: 


5 
Slider (default is "false") 

50 CHEN 
Slider 

50 © 
Slider: 

50 


Slider: 


图 12.21 各 种 slider 


3. range slider 


-名 话 形容 ，range slider 就 是 两 个 把 手 的 slider， 其 代码 稍稍 比 slider 复杂 那么 一 点 : 


«div data-role-"rangeslider"» 
<label for-"range-1la"»Rangeslider:«/label» 


«input type-"range" name-"range-la" id-"range-1la" min-"0" max-"100" 


value-"40"» 


«input type-"range" name-"range-1b" id-"range-1lb" min-"0" max-"100" 


value-"80"» 
«/div» 


效果 如 图 12.22 所 示 。 


11:56 PM 


40 pum 80 


图 12.22” 双 把 手 slider 
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Iange slider 同样 支持 slider 的 各 种 配置 项 : 


«form» 
<div data-role-"rangeslider"» 
<label for-"range-la"»Rangeslider:«/label» 
<input type-"range" name-"range-1a" id-"range-1a" min-"0" max-"100" 
value-"40"» 
<input type-"range" name-"range-1b" id-"range-1b" min-"0" max-"100" 
value-"80"» 
«/div» 


<div data-role-"rangeslider"» 
<label for-"range-10a"»Rangeslider:«/label» 
<input type-"range" name-"range-10a" id-"range-10a" min-"0" max-"10" 
step-".1" value-"2.6"» 
<label for-"range-10b"»Rangeslider:«/label» 
<input type-"range" name-"range-10b" id-"range-10b" min-" 
step-".1" value-"5.4"» 
«/div» 


" max-"10" 


<div data-role-"rangeslider" data-highlight-"false"^ 
<label for-"range-2a"^Rangeslider (default is "true"):«/label» 
<input type-"range" name-"range-2a" id-"range-2a" min-"0" max-"100" 
value-"20"» 
<label for-"range-2b"»^Rangeslider:«/label» 
Xinput type-"range" name-"range-2b" id-"range-2b" min-"0" max-"100" 
value-"80"» 
«/div» 


«div data-role-"rangeslider" data-highlight-"false"» 
<label for-"range-2a"»5Rangeslider (default is "true"):«/label» 
Xinput type-"range" name-"range-2a" id-"range-2a" min-"0" max-"100" 
value-"20"» 
<label for-"range-2b"»Rangeslider:«c/label» 
Xinput type-"range" name-"range-2b" id-"range-2b" min-"0" max-"100" 
value-"80"» 
</div> 


<div data-role="rangeslider" data-mini="true"> 
<label for="range-4a">Rangeslider:</label> 
<input type="range" name="range-4a" id="range-4a" min="0" max="100" 
value="0"> 
<label for="range-4b">Rangeslider:</label> 
<input type="range" name="range-4b" id="range-4b" min="0" max="100" 
value="100"> 
</div> 


<div data-role="rangeslider"> 
<label for="range-5a">Rangeslider:</label> 
<input type="range" name="range-5a" id="range-5a" disabled="disabled" 
min="0" max="100" value="0"> 
<label for="range-5b">Rangeslider:</label> 
<input type="range" name="range-5b" id="range-5b" disabled="disabled" 
min="0" max="100" value="100"> 
</div> 
</form> 
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效果 如 图 12.23 所 示 


Rangeslider: 

40 
Rangeslider 

2.6 x 
Rangeslider (default is "true"): 


20 


Rangeslider (default is "true"): 


20 


Rangeslider 
0 | mnn! 


Rangeslider: 


图 12.23 各 种 双 把 手 


此 外 ， 只 要 是 表单 元 素 都 可 以 放置 到 data-role="fieldcontain" 的 容器 当中 去 ， 以 对 多 
表单 在 逻辑 上 进行 分 组 (在 较 宽屏 幕 上 样式 上 会 和 没有 分 组 有 一 些 区 别 》 


<div data-role="fieldcontain"> 

<label for="slider-7">Slider:</label> 

<input type="range" name="slider-7" id="slider-7" min="0" max="100" 
value="50"> 
</div> 


slider 组 件 也 有 自己 的 实例 化 方法 slider0， 同 样 可 以 传递 各 种 配置 选项 和 调用 enable 
等 方法 : 


var slider = $('.selector').slider(( 
disabled: true, 
highlight: true, 
mini: true, 
theme: 'b', 
trackTheme: 
) 


slider.slider('enable') 


a 


类 似 的 slider 也 有 自己 的 slidecreate 事件 : 


$('.selector').slider(( 
create: function (event, ui) {} 


}) 


$('.selector').on('slidecreate', function(event, ui) {}) 
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另外 ，slider 在 用 户 开 始 交 互 时 ( 轻 触 或 者 拖 忠 时 ) 还 会 触发 slidestart 事件 : 


$('.selector').slider(( 
start: function(event, ui) () 


} 


$('.selector').on('slidestart', function(event, ui) {}) 


或 轻 


既然 有 start， 自 然 也 少不了 stop 事件 


4. Flip switch 


Flip switch 从 本 质 上 来 说 是 一 种 select 元 素 ， 不 过 它 只 能 选择 两 种 值 ， 这 种 控件 在 移 
动 端 很 常用 ， 通 常用 来 配置 选项 的 开 / 关 状 态 : 
<label for-"flip-1"»Flip switch:«/label» 
<select name-"flip-1" id-"flip-1" data-role-"slider"^ 
<option value-"off"»Off«/option» 


<option value-"on"»On«/option» 
</select> 


效果 如 图 12.24 所 示 。 


10:07 AM 


Flip switch: 


Off 


图 1224 Flip switch 


乱七八糟 的 配置 依然 支持 : 


<form> 
<label for="flip-1">Flip switch:</label> 
<select name-"flip-1" id-"flip-1" data-role-"slider"» 
<option value-"off"»Off«/option» 
<option value-"on"»On«/option» 
</select> 


<label for="flip-2">Flip toggle switch:</label> 
<select  name-"flip-2"  id-"flip-2"  data-role-"slider" data-track- 
theme-"a" data-theme-"a"^ 
<option value-"off"»Off«/option» 
<option value-"on"»On«/option» 
</select> 


<label for="flip-3">Flip toggle switch:</label> 

<select name="flip-3" id="flip-3" data-role="slider" data-mini="true"> 
<option value="off">0ff</option> 
<option value="on">On</option> 

</select> 
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<label for-"flip-4"»Flip toggle switch:«/label» 
<select name="flip-4" id="flip-4" data-role="slider" disabled= 
"disabled"> 
<option value="off">0ff</option> 
<option value="on">0n</option> 
</select> 


</form> 


效果 如 图 12.25 所 示 。 


Flip switch: 
Off 


Flip toggle switch: 


Flip toggle switch: 
Off 


Flip toggle switch: 


图 12.25 各 种 Flip switch 

虽然 从 标签 上 来 说 Flip switch 使 用 的 是 select 标签 ， 但 是 在 jQuery Mobile 内 部 使 用 
slider 插件 (data-role-"slider" ) 来 初始 化 实例 ， 因 此 你 可 以 使 用 .slider 方法 来 获取 实例 : 

$('£select-1').slider() 

当然 ， 前 面 提 到 的 slider 支持 的 方法 也 是 都 支持 的 。 

5. checkbox & radio 

checkbox 是 有 点 类 似 于 普通 按钮 旁边 增加 了 一 个 勾 项 框 ， 一 些 例子 : 

<form> 


Xlabel for="checkbox-0">Check me «/label» 
<input type="checkbox" id-"checkbox-0" name-"checkbox-0"» 


<label for-"checkbox-mini-0"»51 agree«c/label» 


<input type="checkbox" name-"checkbox-mini-0" id-"checkbox-mini-0" class 


-"custom" data-mini-"true"» 
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<!-- 成 组 的 checkbox --> 

«fieldset data-role-"controlgroup"^ 
Xlegend»Vertical:«/legend» 
<input type="checkbox" name-"checkbox-v-2a" id-"checkbox-v-2a"» 
<label for-"checkbox-v-2a"»One«/label» 
<input type="checkbox" name-"checkbox-v-2b" id-"checkbox-v-2b"» 
<label for-"checkbox-v-2b"»Two«/label» 
<input typ checkbox" name-"checkbox-v-2c" id-"checkbox-v-2c"» 
<label for-"checkbox-v-2c"»Three«/label» 

«/fieldset» 


<!-- 勾 选 icon 可 以 放 在 右边 --> 
<fieldset data-role-"controlgroup" data-iconpos-"right" > 
<legend>Icon in right & mini:«/legend» 
<input type="checkbox" name-"checkbox-h-6a" id-"checkbox-h-6a" data- 
mini="true"> 
<label for="checkbox-h-6a">One</label> 
<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b" data- 
mini="true"> 
<label for="checkbox-h-6b">Two</label> 
<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c" data 
-mini="true"> 
<label for="checkbox-h-6c">Three</label> 
</fieldset> 


<!-- 水 平成 组 的 checkbox 的 行为 更 像 " 不 会 弹 起 来 的 按钮 ” --> 

<fieldset data-role="controlgroup" data-type="horizontal"> 
<legend>Horizontal:</legend> 
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"> 
<label for="checkbox-h-2a">One</label> 
<input typ checkbox" name="checkbox-h-2b" id="checkbox-h-2b"> 
<label for="checkbox-h-2b">Two</label> 
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c"> 
<label for="checkbox-h-2c">Three</label> 

</fieldset> 


<fieldset data-role="controlgroup"> 

<legend>Swatch A:</legend> 

«input type-"checkbox" name-"checkbox-t-2a" id-"checkbox-t-2a" data- 
theme-"a"» 

<label for-"checkbox-t-2a"»One«/label» 

<input type="checkbox" name-"checkbox-t-2b" id-"checkbox-t-2b" data- 
theme="b"> 

<label for="checkbox-t-2b">Two</label> 

<input type-"checkbox" name-"checkbox-t-2c" id-"checkbox-t-2c" data- 


theme="c"> 
<label for="checkbox-t-2c">Three</label> 
</fieldset> 
</form> 
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效果 如 图 12.26 所 示 。 


Check me 
legreo. Check me 
Vertica 
E) 1agree 
ga Horizontal 
Two o 
Three 


Swatch A. 


Icon in right & mini. 


Three Three 


图 12.26 ”各 种 checkbox 


checkbox 极其 相似 的 是 radio button， 用 法 和 checkbox 几乎 一 样 


«form» 
Xlabel» 
<input type="radio" name-"radio-choice-0" id-"radio-choice-0a"»One 
«/label» 
<label for-"radio-choice-0b"»Two«/label» 
«input type="radio" name-"radio-choice-0" id-"radio-choice-0b" class= 
"custom"» 


<!-- HA radio button 也 可 以 分 离 展示 ， 但 成 组 的 radio 更 容易 让 用 户 理解 界面 的 设计 意 
E ==> 
«fieldset data-role-"controlgroup"^ 
Xlegend»Vertical:«/legend» 
<input type="radio" name-"radio-choice-v-2"  id-"radio-choice-v-2a" 
value-"1" checked-"checked"» 
<label for-"radio-choice-v-2a"»One«/label» 
<input type="radio" name-"radio-choice-v-2"  id-"radio-choice-v-2b" 
value-"2"» 
<label for-"radio-choice-v-2b"»Two«/label» 
<input type="radio" name-"radio-choice-v-2"  id-"radio-choice-v-2c" 
value-"3"» 
<label for-"radio-choice-v-2c"»Three«/label» 
«/fieldset» 


«fieldset data-role-"controlgroup" data-type-"horizontal" data-mini- 
"rues 
Xlegend»Horizontal:«/legend» 
<input type="radio" name-"radio-choice-h-2"  id-"radio-choice-h-2a" 
value-"1" checked-"checked"» 
<label for-"radio-choice-h-2a"»One«/label» 
<input type="radio" name-"radio-choice-h-2"  id-"radio-choice-h-2b" 
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Value="2"> 
<label for-"radio-choice-h-2b"»Two«/label» 
<input type="radio" name-"radio-choice-h-2"  id-"radio-choice-h-2c" 
value-"3"» 
<label for-"radio-choice-h-2c"»Three«/label» 
«/fieldset» 


Xfieldset data-role-"controlgroup" data-type-"horizontal" data-iconpos 
-"right" data-mini-"true"» 
Xlegend»Horizontal:«/legend» 
<input type="radio" data-theme-"e" name-"radio-choice-h-3" id-"radio- 
choice-h-2a" value-"1" checked-"checked"» 
<label for-"radio-choice-h-2a"»Onec«/label» 
<input type="radio" data-theme-"e" name-"radio-choice-h-3" id-"radio 
-choice-h-2b" value-"2"» 
<label for-"radio-choice-h-2b"»Two«/label» 
Xinput type-"radio" data-theme-"e" name-"radio-choice-h-3" id-"radio- 
choice-h-2c" value-"3"» 
<label for-"radio-choice-h-2c"»Three«/label» 
«/fieldset» 
«/form» 


效果 如 图 12.27 所 示 。 


One 


Two 

Vertical: 
© One 
Two 


Three 


Horizontal: 


ca Two Three 


Horizontal: 


图 12.27 各 种 radio 


于 checkbox 和 radio 如 此 相似 ，jQueryMobile 中 也 没有 为 这 两 者 提供 各 自 独 立 的 插 


件 方法 ， 而 是 直接 用 checkboxradio 进行 访问 : 


内 
e 
[] 
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$('.selector').checkboxradio ('disable') 


6. select 


select 元 素 在 jQuery Mobile 中 没有 太 大 变化 ， 依 然 保持 原生 的 select 元 素 的 行为 ， 只 
是 选择 按钮 被 改 成 jQuery Mobile 中 常见 的 按钮 〈 外 加 下 箭头 的 图 标 ): 


<form> 
<div data-role-"fieldcontain"^ 
<label for-"select-native-1"»Basic:«/label» 
<select name-"select-native-1" id-"select-native-1"» 
<option value-"1"»The 1st Option«/option» 
<option value-"2"»The 2nd Option«/option» 
<option value-"3"»The 3rd Option«/option» 
<option value-"4"»The 4th Optionc/option» 
</select> 
</div> 


<!-- select 默认 icon 是 在 右边 --> 
<div data-role-"fieldcontain"» 
<label for-"select-native-3"»Icon left:«/label» 
<select  name-"select-native-3"  id-"select-native-3" data-iconpos 
z"left"^ 
<option value-"1"»The 1st Option«/option» 
<option value-"2"»The 2nd Option«/option» 
<option value-"3"»The 3rd Option«c/option» 
<option value-"4"»The 4th Option«/option» 
</select> 
</div> 


<!-- controlgroup 依然 支持 --> 
<fieldset data-role-"controlgroup" data-mini="true"> 
<legend>Vertical controlgroup, icon left, mini sized:</legend> 
<label for="select-native-8">Select A</label> 
<select  name-"select-native-8" id="select-native-8" data-iconpos 
="left"> 
<option value="#">0ne</option> 
<option value="#">Two</option> 
<option value="#">Three</option> 


</select> 

<label for="select-native-9">Select B</label> 

<select name="select-native-9" id="select-native-9" data-iconpos 
-"left"» 


<option value-"£"»One«/option» 
<option value-"£"»Two«/option» 
<option value-"j£"»Threec/option» 
</select> 
<label for="select-native-10">Select C</label> 
<select name="select-native-10" id="select-native-10" data-iconpos 
-"left"» 
<option value-"£"»One«/option» 
<option value-"4"»Two«/option» 
<option value-"j£"»Three«/option» 
</select> 
</fieldset> 
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Xfieldset data-role-"controlgroup" data-type-"horizontal"^ 

Xlegend»Horizontal controlgroup:«/legend» 

<label for-"select-native-11"»Select A«/label» 

<select name-"select-native-11" id-"select-native-11"» 
<option value-"£"»1«/option» 
<option value-"£"»2«/option» 
<option value-"£"»3«/option» 

</select> 

<label for="select-native-12">Select B</label> 

<select name="select-native-12" id="select-native-12"> 
<option value="#">1</option> 
<option value="#">2</option> 
<option value="#">3</option> 

</select> 

<label for="select-native-13">Select C</label> 

<select name="select-native-13" id="select-native-13"> 
<option value="#">1</option> 
<option value="#">2</option> 
<option value="#">3</option> 

</select> 

</fieldset> 
</form> 


效果 如 图 12.28 所 示 。 


4:29 PM 


Horizontal controlgroup: 


10 10 


图 12.28 基于 原生 控件 的 select 


如 果 你 设置 了 data-native-menu="false" 属 性 ， 将 会 启用 jQuery Mobile 的 自 定义 控件 ， 
从 实现 上 来 说 是 在 对 话 框 中 加 上 button 或 者 checkbox 的 效果 ， 如 图 12.29 所 示 。 
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Multi-select ... 


Standard: 7 day 


Rush: 3 days 
Express: next day 


Overnight 


First Overnight 


Express Saver 


Fd 1229 非 原生 的 select 
因为 select 具有 “弹出 ”菜单 的 功能 ， 所 以 其 API 方 面 多 了 两 个 接口 : 
// 打 开 菜 单 


$('.selector').selectmenu('open') 
// 关 闭 菜单 


$('.selector').selectmenu('close') 

7. Text inputs & Textareas 

文本 域 在 jQuery Mobile 的 行为 依然 主要 依赖 HTML 5 原生 控件 的 行为 ,只 不 过 改 了 改 
样式 ， 具 体 效 果 如 图 12.30 所 示 。 


Search Input: 


Textarea: 


Textarea 


Number: data-clear-btn-"true" 
123 [x] 


Date: data-clear-btn-"true" 


File: data-clear-btn-"true" 


图 12.30 各 种 文本 域 
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所 有 的 文本 域 都 通过 textinput 访问 : 


$('selector') .textinput ({clearBtn: true]) 


默认 情况 下 ,jQuery Mobile 会 自动 寻找 页 面 上 所 有 的 表单 元 素 ， 并 调用 相应 的 插件 方 
法 (比如 .selectmenu) 来 初始 化 这 些 组 件 ， 这 种 特性 使 得 懂得 HTML 的 设计 师 或 工程 师 能 
很 快 给 出 程序 原型 ， 但 同时 意味 着 你 将 无 法 直接 利用 DOM API 操作 这 些 表单 元 素 : 


$('input[type-"checkbox"]).prop('checked', true) 


上 面 这 句 话 虽然 将 checkbox 选中 了 , 但 是 对 于 用 户 而 言 是 察觉 不 到 的 一 一 因为 真正 的 
checkbox 元 素 被 隐藏 了 。jQuery Mobile 给 出 的 解决 方法 是 调用 插件 的 refresh 方法 : 


$('input[type-"checkbox"]').prop('checked', true).checkboxradio 
("refresh") 


这 个 方法 对 于 所 有 表单 组 件 都 是 可 用 的 : 


$('input[type-"radio"]').prop('checked', true).checkboxradio('refresh') 
var myselect = $('£select-1') 

myselect[0].selectedIndex - 3 

myselect.selectmenu('refresh') 
$('input[type-"range"]').val(60).slider('refresh') 

var flipswitch = $('£selectbar') 

flipswitch[0].selectedIndex - 1 

flipswitch.slider('refresh') 


如 果 你 想 阻 止 表单 的 自动 初始 化 ， 可 以 设置 keepNative 选项 ; 


$(document).bind('mobileinit', function() ( 
//keepNative 是 一 个 选择 器 ， 表 示 需 要 保持 原生 状态 的 元 素 是 什么 
$.mobile.page.prototype.options.keepNative - "select, input.foo, 
textarea.bar' 
H) 
除 此 之 外 你 也 可 以 设置 data-enhance="false" 属 性 来 达到 同样 的 效果 。 
另外 从 前 面 的 例子 你 也 能 看 到 ， 几 乎 所 有 的 表单 元 素 都 可 以 放 到 data-role= 
"fieldcontain" 的 容器 里 ,在 容器 里 label 和 input 元素 会 并 排 靠 在 一 起 , 在 屏幕 宽度 小 于 448px 
时 则 会 变 成 block 元 素 ， 并 且 容 器 最 下 方 会 有 一 条 分 割 线 ， 如 图 12.31 所 示 。 


Text Input: Texi 


图 12.31 fieldcontain 的 分 割 线 


12.2.7 UI 组 件 一 一 Header & Footer 


toolbar 是 移动 设备 上 常见 的 设计 元 素 ，header 和 footer 都 可 以 充当 toolbar 的 角色 , 一 
个 固定 位 置 的 header 可 以 这 样 定义 : 
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<div data-role-"header" data-position-"fixed"» 
<h1>Page Title</h1> 
«/div» 


当然 footer 也 不 能 少 ; 


<div data-role="footer" data-position="fixed"> 
<h1>Fixed Footer!</h1> 
«/div» 


效果 如 图 12.32 所 示 。 


12:20 PM 


Page Title 


本 footer 一 定位 于 屏幕 最 下 方 


图 12.32 fixed toolbar 


对 于 fixed 的 toolbar， 如 果 你 单 击 屏幕 的 其 他 区 域 ，toolbar 会 自动 隐藏 (如 果 内 容 高 
度 可 以 填充 整个 屏幕 的 话 )。 如 果 你 为 toolbar 设置 了 data-fullscreen='"true" 属 性 ， 那 么 内 容 
高 度 即使 没有 超过 屏幕 高 度 情况 下 ， 你 也 可 以 通过 单 击 屏 幕 来 隐藏 toolbar。 
toolbar 里 面 可 以 填充 各 种 奇怪 的 东西 ， 最 常见 的 自然 是 按钮 ，toolbar 里 的 按钮 会 自动 
EJ inline 形式 ， 并 且 位 置 也 会 自动 调整 (一 左 一 右 ): 
<div data-role-"header"» 
<a href="#" data-icon="delete"> 取 消 </a> 
<h1> 我 的 文档 </h1> 


<a href-"$" data-icon="check"> 保 存 </a> 
</div> 
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效果 如 图 12.33 所 示 。 


12:54 AM 


我 的 文档 


图 12.33 ” 带 按钮 的 toolbar 


jQuery Mobile 有 一 项 功能 是 自动 为 header 栏 加 上 “返回 ”按钮 ， 在 早期 版 本 的 jQuery 
Mobile 中 这 项 功能 是 默认 开启 的 ， 这 项 功能 本 身 是 音 鉴 于 iOS 的 设计 ， 由 于 它 会 导致 很 多 
不 必要 的 麻烦 ， 现 在 的 版 本 中 默认 已 经 被 禁用 了 ， 因 此 建议 大 家 不 要 使 用 这 个 功能 ， 而 是 
在 需要 导航 的 时 候 自 行 提供 返回 。 
footer 中 也 可 以 添 NR 元 素 , 不 过 其 内 的 元 素 的 行为 和 header kn 许 不 一 样 。 
首先 是 header 中 必须 包含 一 个 title (heading 元 素 )， 即 便 是 没有 title， 你 也 必须 提供 一 个 
class 为 ui-title 的 span 元 素 ， 才 能 保证 header 的 正常 显示 : 


<div data-role="header"> 
<a href="#" data-icon-"gear" class="ui-btn-right">Options</a> 
<span class="ui-title"></span> 

</div> 


而 footer 则 没有 此 限制 , 而 且 其 内 的 按钮 等 元 素 不 会 自动 调整 位 置 , 而 是 按 顺 序 排 布 : 


<div data-role="footer"> 
<a href="#" data-icon="plus">Add</a> 
<a href="#" data-icon="arrow-u">Up</a> 
<a href="#" data-icon="arrow-d">Down</a> 
</div> 


另外 ,在 许多 情况 下 你 可 能 都 希望 header 或 footer 是 起 全 局 导航 的 作用 一 一 这 意味 着 
BHE page 切换 了 toolbar 依旧 内 然 不 动 ， 想 做 到 这 个 需要 引入 navbar 的 支持 。 


1. navbar 


navbar 是 配合 header 和 footer 进行 导航 作用 的 额外 的 导航 栏 : 


<div data-role="navbar"> 
<ul> 
<li><a href="#" class="ui-btn-active">0ne</a></li> 
<li><a href="#">Two</a></1i> 
<li><a href="#">Three</a></li> 
</ul> 
</div> 


e3 5 


第 2 篇 HTML 5 移动 Web 开发 实战 


效果 如 图 12.34 所 示 。 


8:44 AM 


图 12.34 navbar 


navbar 中 的 链接 会 自动 转换 成 按钮 ， 且 一 排 支持 最 多 五 个 导航 按 得 
钮 会 自动 折 行 并 按 每 行 两 个 排 布 : 


<div data-role-"navbar"» 


«ul» 
<li><a 
<li><a 

</ul> 

</div> 


href="#" class="ui-btn-active">0ne</a></li> 
href="#">Two</a></li> 


<div data-role="navbar"> 


<ul> 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 


href="#" class="ui-btn-active">0ne</a></li> 
href="#">Two</a></1i> 
href="#">Three</a></1i> 


<div data-role="navbar" data-grid="d"> 


«ul» 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 

</ul> 

</div> 


href="#" class="ui-btn-active">0ne</a></li> 
href="#">Two</a></li> 
href="#">Three</a></li> 
href="#">Four</a></li> 
href="#">Five</a></li> 


<div data-role="navbar"> 


«ul» 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 

</ul> 


«372 s 


href-"4" class-"ui-btn-active"»One«/a»«/li» 
href-"4"»Twoc«/a»«/li» 
href-"£"»Threec/a»«/li» 
href-"£"»Fourc/a»«/li» 
href-"j£"»5Fivec/a»«/li» 

hre "5Six«/a»«/li» 
href-"£"»Sevenc/a»«/li» 


， 超 过 五 个 导航 按 
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«/div» 


效果 如 图 12.35 所 示 。 


8:59 AM 


图 12.35 各 种 navbar 


navbar 也 可 以 配合 header 和 footer 一 起 使 用 : 


<div data-role-"header"» 
<h1>I'm a headerc/hl» 
<a href="#" data-icon-"gear" class-"ui-btn-right"»Options«/a» 
<div data-role-"navbar"» 
«ul» 
<li><a href="#">0ne</a></li> 
<li><a href="#">Two</a></li> 
<li><a href="#">Three</a></li> 
</ul> 
</div> 
</div> 


<div data-role="footer"> 
<h4 style="text-align:center;">I'm the footer</h4> 
<div data-role="navbar"> 
<ul> 
<li><a href="#">0ne</a></li> 
<li><a href="#">Two</a></li> 
<li><a href="#">Three</a></li> 
</ul> 
</div> 
</div> 
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效果 如 图 12.36 所 示 。 


9:19 AM 


l'm a header %& Options 


Two Three 


I'm the footer 


Two 


图 12.36 toolbar 中 的 navbar 


2. Persistent navbar 


Persistent navbar 允许 你 在 导航 页 面 时 navbar 不 消失 类 似 10S 中 的 tab bar. 要 获得 


此 行为 需要 为 footer (X header) 加 上 data-id: 


«div data-role-"footer" data-id-"fool" data-position="fixed"> 
«div data-role-"navbar"» 
«ul» 
<li><a href-"toolbar6.html" class-"ui-btn-active ui-state-persist"» 
Home«/a»«/1li» 
<li><a href-"a.html"»InfocX/a»«/li» 
<li><a href-"b.html"»5Friends«/a»«/li» 
<li><a href-"c.html"»Emails«/a»«/li» 
«/ul» 
«/div» 
«/div» 


所 链接 的 页 面 需要 和 首页 保持 同样 的 结构 ， 如 b.html 可 能 类 似 于 : 


<body> 
<div id="home-page" data-role="page"> 
<div data-role="content"> 
Friends 
</div> 
<div data-role-"footer" data-id-"fool" data-position="fixed"> 
<div data-role="navbar"> 
<ul> 
<li><a href="toolbar6.html">Home</a></li> 
<li><a href="a.html">Info</a></li> 
<li><a  href-"b.html"  class-"ui-btn-active ui-state-persist" 
data-transition="slide">Friends</a></li> 
<li><a href="c.html">Emails</a></li> 
«/ul» 
«/div» 
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</div> 
</div> 


最 后 效果 (iOS 7 上 的 Safari) 如 图 12.37 所 示 。 


iOS 模拟 器 - iPhone Retina (3.5-inch) / iOS 7.0 (11A465) 
Carrier S 10:08 AM [d 
localhost [v 
Friends 
Home Info Friends Emails 
《 lle i 


图 12.37 fixed footer 


12.2.8 UI 组 件 一 一 ListView 


ListView 的 样子 最 初 来 源 于 iOS， 在 移动 应 用 中 它 有 着 举重 若 轻 的 地 位 ， 绝 大 部 分 移 
动 应 用 都 离 不 开 它 。ListView 在 jQueryMobile 中 就 是 列表 (ol 和 ul)， 先 来 看 一 个 基本 的 
代码 : 

<div data-role="content"> 

<ul data-role="listview"> 
<li>Acura</li> 
<li>Audi</li> 
<li>BMW</li> 
</ul> 
<!-- 默认 情况 下 listview 会 充满 屏幕 ， 这 意味 着 在 content 里 的 listview 会 有 -15px 
的 边 距 --> 


Xbr»«br»«br» 


<ol data-role-"listview"^ 
<li>BMW</li> 
<li>Cadillac</li> 
<li>Ferrari</li> 

«/ol» 


«/div» 
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效果 如 图 12.38 所 示 。 


iOS 15338 - iPhone Retina (3.5-inch) / iOS 7.0 (11A465) 


Carrier F 9:55 PM 


localhost 


Acura 


Audi 


BMW 


1. BMW 


2. Cadillac 


3. Ferrari 


< A Jg 5l 


[d 12.38 基本 的 ListView 


ListView 有 个 重要 特性 是 会 自动 将 里 的 链接 变 为 可 单 击 的 按钮 ， 并 且 加 上 icon: 


<ul data-role= 
<li><a href="#">Acura</a></1i> 
Xli»«a href- »Audi«/a»«/li» 
<li><a href="#">BMW</a></1i> 


"listview"» 


效果 如 图 12.39 Bros o 


Acura 


Audi 


BMW 


O 


© 
© 


图 12.39 i BERT ListView 


如 果 加 上 data-inset="true", ListView 会 去 除 负 边 距 正 常 显示 在 页 面 中 ， 


如 图 12.40 所 示 。 
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Acura © 
Audi © 
BMW © 


图 12.40 data-inset="true" 的 ListView 
除了 基本 的 样式 ，jQueryMobile 为 ListView 增加 了 许多 强大 的 功能 ， 比 如 
data-filter="true" 属 性 可 以 为 ListView 增加 过 滤 功 能 : 


<ul data-role-"listview" data-inset-"true" 
data-filter-"true" data-filter-placeholder-"Search fruits..."^ 


效果 如 图 12.41 所 示 。 


Ap e 
Apple o 
Grape o 


图 12.41 1$ filter 的 ListView 


在 额外 设置 data-filter-reveal="true" 属 性 时 会 默认 隐藏 列表 全 部 条 目 ， 仅 在 键入 关键 词 
时 显示 满足 过 滤 条 件 的 条 目 。 

如 果 你 需要 对 列表 在 视觉 上 进行 分 类 ， 可 以 使 用 data-role="list-divider" 的 li 元 素 ， 同 
时 可 以 设置 其 data-divider-theme 改变 分 隔 符 的 样式 ， 如 图 12.42 所 示 。 


Mail 

Inbox o 
Outbox o 
Contacts 

Friends o 
Work o 


图 12.42 H4 WT] ListView 
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如 果 你 还 嫌 麻 烦 ，data-autodividers="true" 属 性 可 以 帮助 你 按 首 字母 排序 来 分 类 列表 
元 素 。 
ListView 里 可 以 出 现 各 种 各 样 的 元 素 ， 比 如 数字 气泡 、 图 标 和 缩 略 图 等 等 : 


<ul data-role-"listview" data-count-theme-"c" data-inset="true"> 
<li><a href="#">Inbox <span class="ui-li-count">12</span></a></li> 
<li data-icon="gear"><a href="#">Settings</a></li> 
<!-- 加 上 ui-li-icon 的 图 片 会 自动 应 用 16x16 的 图 标 样式 --> 
<li><a href="#"><img src-"../assets/us.png" alt-"United States" 
class-"ui-li-icon ui-corner-none"^Languagec/a»«/li» 
<!-- 列表 中 的 图 像 会 自动 缩放 为 80X 80 的 规格 --> 
<li><a href="#"> 
<img src="../assets/album-bb.jpg"> 
<h2>Broken Bells</h2> 
<p>Broken Bells</p></a> 
</li> 
</ul> 


效果 如 图 12.43 所 示 。 


Inbox 2) © 
Settings Q 
= Language o 
Broken Bells 
Broken Bells © 


图 12.43 丰富 多 彩 的 ListView 


富 文 本 和 主题 化 也 是 小 菜 一 碟 : 


«ul data-role-"listview" data-inset-"true"» 
<li data-role-"list-divider"»5Friday, October 8, 2010 «span class-"ui-li 
-count"»2«/span»«/li» 
<li><a href-"index.html"» 
Xh2»Stephen Weber</h2> 
Xp»«strong»You've been invited to a meeting at Filament Group in Boston, 
MA«/strong»«/p» 
Xp»Hey Stephen, if you're available at 10am tomorrow, we've got a meeting 
with the jQuery team.«/p» 
X!-- ui-li-aside 是 个 很 有 用 的 class --» 
Xp class-"ui-li-aside"»Xstrong»6:24«/strong»PMX/p» 
X/a»«/li» 
<li data-theme-"e"»«a href-"index.html"» 
<h2>jQuery Team</h2> 
<p><strong>Boston Conference Planning</strong></p> 
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<p>In preparation for the upcoming conference in Boston, we need to start 
gathering a list of sponsors and speakers.</p> 
Xp class="ui-li-aside"><strong>9:18</strong>AM</p> 
</a></1i> 
<li data-role-"list-divider"»Thursday, October 7, 2010 «span class-"ui 
-li-count"»1«/span»«/li» 
<!-- WRA li 元 素 里 有 两 个 a LX, jQueryMobile 会 将 两 个 按钮 自动 分 开 (split 
button) --» 
<li><a href-"index.html"» 
Xh2»Avery Walker</h2> 
<p><strong>Re: Dinner Tonight«/strong»«/p» 
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't 
wait! </p> 
Xp class-"ui-li-aside"»«strong»4:48«/strong»PM«X/p» 
</a> 
<a href="#">Purchase album</a> 
</li> 
</ul> 


效果 如 图 12.44 所 示 。 


Friday October 8, 2010 [2] 
:24PM 

Stephen Weber s 

You've been invited to a meeting at Fil... e 


Hey Stephen, if you're available at 10am ... 


Thursday, October 7, 2010 e 


Avery Walker CAM 


Re: Dinner Tonight 
Sure, let's plan on meeting at Highland... 


图 12.44 带 丰 富 格式 的 ListView 


甚至 向 ListView 里 添加 表单 元 素 也 不 是 难事 ， 这 里 就 不 过 多 介绍 了 。 
有 了 ToolBar 和 ListView 的 移动 应 用 已 经 是 像 模 像样 了 ， 下 面 将 介绍 一 些 有 辅助 作用 
的 UI 组 件 。 


12.2.9 UI 组 件 一 一 Collapsibles 和 Accordions 


Collapsible 和 Accordion 是 桌面 应 用 和 移动 应 用 中 都 很 常见 的 两 类 UI 控件 ， 在 
jQueryMobile 中 自然 少不了 它们 的 身影 。 
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Collapsible 会 创建 可 单 击 的 标题 区 域 以 及 一 个 可 以 折 车 的 面板 区 域 ,之 所 以 Collapsible 
在 移动 应 用 中 大 受 推崇 主要 是 因为 它 能 为 你 的 内 容 节 省 许多 屏幕 空间 。 
创建 一 个 collapsible 非常 简单 : 


<div data-role="collapsible"> 

<!-- 可 单 击 的 标题 区 域 --> 

<h4>Heading which clickable</h4> 

<p>I'm the collapsible content. By default I'm closed, but you can click 
the header to open me.</p> 
«/div» 


此 时 h4 标签 会 变 成 一 个 按钮 ， 并 且 被 附加 上 表示 “可 展开 ”的 图 标 ， 如 图 12.45 所 示 。 
© Heading which clickable 


I'm the collapsible content. By 
default I'm closed, but you can click 
the header to open me. 


图 1245 基本 的 collapsible 
主题 化 支持 当然 也 必 不 可 少 , 而 且 可 以 通过 data-content-theme Jr PE BLBE Ve Cu] 7r 2 fd 
板 的 视觉 效果 : 
<div data-role="collapsible" data-theme="b" data-content-theme="d"> 
<h4>Heading</h4> 


<p>I'm the collapsible content with a themed content block set to "d".</p> 
«/div» 


效果 如 图 12.46 所 示 。 


I'm the collapsible content with a 
themed content block set to "d". 


图 12.46 collapsible 主题 化 


是 不 是 看 起 来 更 和 谐 了 ? 此 外 data-expanded-icon 和 data-collapsed-icon 属性 还 允许 你 
修改 默认 的 图 标 〈 正 负 号 )， 而 且 data-iconpos 属性 依然 适用 ， 面 板 的 内 容 也 不 一 定 非 得 是 
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Pp 标签， 也 可 以 是 其 他 任何 合法 的 HTML， 在 里 面 谋 套 ListView 组 件 也 是 轻而易举 : 
<div data-role-"collapsible" 
data-theme-"b" data-content-theme-"d" 
data-collapsed-icon-"arrow-d" data-expanded-icon-"arrow-u" 
data-iconpos-"right"^ 
<h4>Heading</h4> 
<ul data-role-"listview" data-inset="false"> 


Xli»Read-only list item 1«/li» 

Xli»Read-only list item 2«/li» 

Xli»Read-only list item 3«/li» 
</ul> 
</div> 


效果 如 图 12.47 所 示 。 


Heading ^ 
Read-only list item 1 
Read-only list item 2 


Read-only list item 3 


图 1247 collapsible 容器 


REEMA form 元 素 也 可 以 扩展 为 collapsible 控件 : 


«form» 
Xfieldset data-role-"collapsible" data-theme-"a" data-content- theme 
="d"> 
<legend>Legend</legend> 
<label for="textinput-f">Text Input:</label> 
<input type="text" name="textinput-f" id="textinput-f" placeholder= 
"Text input" value=""> 
<div data-role="controlgroup"> 
<input type-"checkbox" name-"checkbox-1-a" id-"checkbox-1-a"» 
<label for-"checkbox-1-a"»One«/label» 
<input type="checkbox" name-"checkbox-2-a" id-"checkbox-2-a"» 
<label for-"checkbox-2-a"»Two«/label» 
<input type="checkbox" name-"checkbox-3-a" id-"checkbox-3-a"» 
<label for-"checkbox-3-a"»Three«/label» 
«/div» 
«/fieldset» 
«/form» 


效果 如 图 12.48 所 示 。 
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Text Input: 

One 

Two 
Three 


图 12.48 collapsible 的 表单 


和 ListView 类 似 ，data-inset 属性 可 以 控制 控件 相对 于 屏幕 的 边 距 ， 只 不 过 其 默认 值 为 
true， 设 置 为 false 会 使 collapsible 充满 屏幕 : 
<div data-role="collapsible" data-inset="false" data-content-theme="d"> 
<h4>Heading</h4> 
<p>I'm the collapsible content. By default I'm closed, but you can click 


the header to open me.</p> 
</div> 


效果 如 图 12.49 所 示 。 


© Heading 


I'm the collapsible content. By default I'm 
closed, but you can click the header to 
open me. 


图 12.49 无 边 距 collapsible 


accordion 控件 类 似 于 多 个 组 合 在 一 起 且 互 斥 的 collapsible， 在 jQueryMobile 里 直接 使 
用 data-role="collapsible-set" 将 一 组 collapsible 套 在 一 起 就 可 以 : 


<div data-role-"collapsible-set" data-theme-"c" data-content-theme-"d"» 
<div data-role-"collapsible"^ 
Xh3»Section 1«/h3» 
<p>I'm the collapsible content for section 1</p> 
«/div» 
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<div data-role="collapsible"> 
<h3>Section 2</h3> 
<p>I'm the collapsible content for section 2</p> 
«/div» 
<div data-role-"collapsible"^ 
Xh3»Section 3«/h3» 
<p>I'm the collapsible content for section 3</p> 
«/div» 
«/div» 


效果 如 图 12.50 所 示 。 


© Section 1 


© Section 2 


I'm the collapsible content for 
section 2 


© Section 3 


图 12.50 ”基本 的 accordion 


data-mini. data-collapsed-icon. data-iconpos 和 data-theme 等 等 也 不 在 话 下 : 


<div data-role-"collapsible-set" 
data-iconpos-"right" 
data-mini-"true" 
data-theme-"a" data-content-theme-"a" 
data-collapsed-icon-"arrow-r" data-expanded-icon-"arrow-d" 
zs 
«div data-role-"collapsible"» 
Xh3»Icon set on the set</h3> 
Xp»Specify the open and close icons on the set to apply it to all the 
collapsibles within.«/p» 
</div> 
<div data-role="collapsible"> 
<h3>Icon set on the set</h3> 
<p>This collapsible also gets the icon from the set.</p> 
</div> 
<!-- 你 也 可 以 为 每 一 个 collapsible 单独 设置 data-* 属性 --> 
<div data-role-"collapsible" 
data-iconpos-"left" data-collapsed-icon-"gear" data-expanded-icon- 
"delete" 
data-theme-"e" data-content-theme-"e"» 
Xh3»Icon set on this collapsible«c/h3» 
<p>The icons here are applied to this collapsible specifically, thus 
overriding the set icons.«/p» 
«/div» 
«/div» 
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效果 如 图 12.51 所 示 。 


Icon set on the set 


Icon set on the set 


This collapsible also gets the icon 
from the set. 


图 12.51 丰富 多 彩 的 accordion 
设置 data-corners="false" 还 可 以 去 除 默 认 圆 角 : 


<div  data-role-"collapsible-set"  data-corners-"false"  data-theme-"c" 
data-content-theme-"d"» 
<div data-role-"collapsible"» 
Xh3»Section 1«/h3» 
Xp»Collapsible content«/p» 
«/div» 
<div data-role-"collapsible"» 
Xh3»Section 2«/h3» 
Xp»Collapsible content«/p» 
</div> 
<div data-role="collapsible"> 
<h3>Section 3</h3> 
<p>Collapsible content</p> 
</div> 
</div> 


效果 如 图 12.52 所 示 。 


© Section 1 
© Section 2 


© Section 3 


图 12.52 ”无 圆 角 accordion 


善 用 collapsible 和 accordion 可 以 使 得 你 的 移动 应 用 界面 更 加 简洁 美观 而 又 不 缺乏 必要 
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12.2.10 ”UI 组 件 一 一 popup 


popup〔 弹 出 层 ) 的 应 用 十 分 广泛 ， 可 以 小 到 是 一 个 文字 (tooltip)， 也 可 以 大 到 是 一 
个 图 片 浏览 框 〈lightbox )。 

大 多 数 JavaScript 框架 在 实现 popup 组 件 时 都 会 选择 让 用 户 编写 JavaScript 代码 的 方 
式 ， 类 似 于 : 


var popup = new Popup('buttonId') 
popup.setTitle('this is popup title') 
popup.setContent('this is popup content') 
popup. show () 


而 jQueryMobile Hii 38 a EEH ERREARI, popup 组 件 也 不 
例外 ， 只 用 HTML 就 可 以 完成 最 基本 的 功能 : 


<a href="#popupBasic" data-rel-"popup" data-role-"button" data-inline 
-"true" data-transition-"slide"»5Basic Popup</a> 
<div data-role-"popup" id-"popupBasic"» 
<p>This is a completely basic popup, no options set.</p> 
«/div» 


效果 如 图 12.53 所 示 。 


This is a completely basic popup, no 
| options set. 


图 12.53 popup 


添加 了 data-role="popup" 属 性 的 元 素 在 默认 情况 下 会 被 隐藏 ，data-rel="popup" 属 性 告 
Vf jQueryMobile 当前 链接 或 按钮 链接 到 的 目标 将 以 popup 方式 打开 ，data-transition 指定 弹 
出 层 的 动画 效果 。 例 如 ， 设 置 为 data-transition="slide" 的 时 候 会 从 右 侧 飞 入 和 飞 出 ， 如 图 


12.54 所 示 。 
Basic Popup 


图 12.54 为 popup 设置 data-transition 


This is a con 
Options set. 


一 个 popup 本 质 上 其 实 只 是 一 个 容器 ， 如 果 将 图 片 放 入 容器 ， 那 么 可 以 轻松 创造 出 一 
个 LightBox 组 件 : 
<a href="#popupParis" data-rel-"popup" data-position-to="window" data- 


transition-"fade"» 
«img src-"../assets/paris.jpg" alt-"Paris, France" style= "width: 
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30$"»«/a» 
<a href-"£popupSydney" data-rel-"popup" data-position-to-"window" data- 
transition-"fade"» 

«img src-"../assets/sydney.jpg" alt-"Sydney, Australia" style -"width: 
30$"»«/a» 
«!—- data-overlay-theme 若 指定 了 主题 ， 则 会 在 popup 层 后 加 上 与 主题 颜色 对 应 的 半 透 明 
覆盖 层 --> 
<div  data-role-"popup"  id-"popupParis" data-overlay-theme="a" data- 
theme-"d" data-corners-"false"» 

<!-- data-rel-"back" 意味 着 这 是 一 个 "返回 " 按钮 ，data-iconpos="notext" 的 作用 
是 隐藏 按钮 文本 --> 

<a href="#" data-rel-"back" data-role-"button" data-theme-"a" data- 
icon-"delete" data-iconpos-"notext" class-"ui-btn-right"»Close«c/a» 

<img src-"../assets/paris.jpg" style-"max-height:512px;" alt-"Paris, 
France"» 
«/div» 
<div data-role-"popup" id-"popupSydney" data-overlay-theme-"e" data- 
theme-"d" data-corners-"false"» 

<a href="#" data-rel-"back" data-role-"button" data-theme-"a" data- 
icon-"delete" data-iconpos-"notext" class-"ui-btn-right"»Close«/a» 

«img src-"../assets/sydney.jpg" style-"max-height:512px;" alt-"Sydney, 
Australia"» 
«/div» 


效果 如 图 12.55 所 示 。 


图 12.55 image LightBox 


默认 情况 下 单 击 popup 外 部 区 域 或 者 按 下 Esc 键 都 可 以 关闭 popup， 由 于 jQueryMobile 
在 打开 popup 时 会 往 浏览 器 历史 里 面 写 入 一 条 记录 ， 因 此 在 单 击 后 退 按钮 时 jQueryMobile 
也 会 帮 你 关闭 popup, ，data-rel="back" 按 钮 也 起 着 同样 的 作用 。 如 果 你 添加 了 
data-dismissible="false" 属 性 ， 那 么 popup 只 能 通过 “返回 ”的 方式 来 进行 关闭 。 

data-position-to 属性 定义 popup 打开 时 处 于 的 位 置 ， 有 三 种 指定 位 置 的 方式 : 

<!-- window: 相对 于 窗口 的 中 间 --> 


Xa href="#positionWindow"  data-role-"button" data-inline="true" data 
-rel-"popup" data-position-to-"window"»Position to window</a> 
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<!-- 相对 于 被 点 击 链 接 元 素 的 中 间 (tooltip 最 适用 ) --> 
<a href="#positionOrigin" data-role-"button" data-inline-"true" data- 
rel-"popup" data-position-to-"origin"»Position to origin</a> 
«t-- 相对 于 特定 元 素 --> 
«a href-"f$positionSelector" data-role-"button" data-inline-"true" 
data-rel-"popup" data-position-to-"fsposition-header"^Position to 
d$position-header«/a» 
<div  data-role-"popup"  id-"positionWindow"  class-"ui-content" data- 
theme-"d"» 

<p>I am positioned to the window.«/p» 


«/div» 
<div  data-role-"popup"  id-"positionOrigin"  class-"ui-content" data- 
theme-"d"» 

<p>I am positioned over the origin.«/p» 
«/div» 
<div data-role-"popup" id-2"positionSelector" class-"ui-content" data- 
theme-"d"» 


<p>I am positioned over the header for this section via a selector. If the 
header isn't scrolled into view, collision detection will place the popup 
so it's in view.</p> 
«/div» 


和 页 面 切换 一 样 ，popup 支持 jQueryMobile py HHY flip 和 slide 等 所 有 的 转 场 效果 。 
我 们 前 面 提 到 popup 本 质 上 只 是 一 个 容器 ， 因 此 popup 可 以 拿 来 做 各 种 事情 ， 比 如 在 
popup 里 面 加 上 ListView 就 变 成 了 弹出 菜单 : 


<a href="#popupMenu" data-rel="popup" data-role="button" data-inline 
-"true" data-transition-"slideup" data-icon-"gear" data-theme-"e"» 
Actions...«/a» 
<div data-role-"popup" id-"popupMenu" data-theme-"d"» 
<ul data-role-"listview"  data-inset-"true"  style-"min-width:210px;" 

data-theme-"d"» 

<li data-role-"divider" data-theme-"e"»Choose an actionc/li» 

<li><a href="#">View details«/a»«/li» 


<li><a href="#">Disable</a></1i> 

<li><a href="#">Delete</a></1i> 
</ul> 
</div> 


效果 如 图 12.56 所 示 。 


View details 
Edit 


Disable 


oo000 


Delete 


图 12.56 弹出 菜单 
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表单 元 素 也 可 以 放 入 popup REIHE popup 变 成 了 对 话 框 组 件 )。 甚 至 地 图 和 iFrame 
也 可 以 放 入 popup。 


12.2.11 UI 组 件 一 一 dialog 


dialog 说 白 了 就 是 一 个 特殊 的 popup， 只 是 它 里 面 的 内 容 包含 的 通常 是 一 个 完整 的 
jQueryMobile page。 一 个 链接 到 其 他 页 面 的 a 标签 如 果 加 上 了 data-rel-"dialog" 属性， 被 链 
接 的 页 面 最 后 会 以 dialog 的 方式 显示 在 当前 页 面 : 


<a href-"foo.html" data-rel="dialog">Open dialog</a> 


被 链接 的 foo.html 必须 是 一 个 合法 的 jQueryMobile page 片段 ， 比 如 : 


<div data-role="page"> 
<div data-role="header"> 
<h1>header</h1> 
</div> 
<div data-role="content"> 
here is foo.html 
</div> 
</div> 


， 你 的 foo.html 文件 也 可 以 包含 head 和 body 等 标签 ， 只 不 过 在 被 弹出 为 对 话 框 
的 情 ; " aena ep 会 忽略 这 些 内 容 ， 因 此 建议 在 使 用 dialog 时 ， 目 标 页 就 只 使 用 单纯 
的 HTML 片段 ， 完 整 的 HTML 页 面 会 导致 更 多 的 网 络 开销 。 
对 于 dialog, data-transition 属性 依然 可 用 (默认 是 pop ): 
«a href-"foo.html" data-transition-"slide" data-rel-"dialog"»Open dialog 
</a> 
如 果 目 标 页 面 拥有 一 个 header 组 件 ， 那 么 jQueryMobile 会 自动 为 header 的 左边 加 上 
-个 关闭 按钮 , 你 可 以 通过 为 目标 页 面 的 header 设置 data-close-btn="right" 来 将 按钮 放置 到 
右边 : 


<div data-role="page" data-close-btn="right"> 
<div data-role="header"> 
<hl>header</h1> 
</div> 
<div data-role="content"> 
here is foo.html 
</div> 
</div> 


最 终 效果 如 图 12.57 所 示 。 


header x 


here is foo.html 


图 12.57 dialog 
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如 果 你 是 直接 在 单独 的 浏览 器 窗口 中 打开 目标 页 面 的 ， 关 闭 按 钮 则 不 会 出 现 。 当 然 ， 
你 也 可 以 设置 data-close-btn="none" 属 性 让 关闭 按钮 无 论 在 什么 情况 下 都 不 出 现 。 
如 果 你 需要 以 编程 方式 关闭 对 话 框 ， 可 以 这 样 : 


$('.ui-dialog') .dialog('close') 


要 注意 的 是 ， 虽然 关闭 行为 本 质 上 是 页 面 间 的 导航 ,但 jQueryMobile 并 不 会 在 浏览 器 
里 面 留 下 历史 记录 。 举 例 来 说 ， 当 你 在 某 个 页 面 单 击 一 个 链接 打开 一 个 对 话 框 后 ， 然 后 再 
通过 对 话 框 导航 到 其 他 页 面 ( 此 时 对 话 框 关闭 ) ， 这 时 候 你 单 击 返回 按钮 会 被 导航 至 第 一 
个 页 面 ， 而 不 是 那个 对 话 框 。 


12.2.12 ”响应 式 组 件 一 一 responsive grids 


前 面 介绍 到 jQueryMobile 开发 之 初 就 完全 遵从 响应 式 设计 的 原则 ， 除 了 前 面 介绍 的 
UI 控件 本 身 都 具有 一 定 的 “响应 式 ” 特性 外 , jQueryMobile 还 特别 提供 了 一 组 响应 式 组 件 ， 
包括 responsive grids, reflow tables, column chooser tables 和 sliding panels， 下 面 先 来 看 看 
responsive grids, 
栅 格 系统 是 许多 CSS 框架 都 会 提供 的 页 面 排版 工具 ， 不 过 jQueryMobile 中 的 grid 系 
统 和 传统 意义 的 栅 格 有 许多 不 同 之 处 。 
在 jQueryMobile 中 用 ui-grid-a/b/c/d/e 五 个 class 来 定义 五 种 不 同 的 grid 类 型 ， 用 
ui-block-a/b/c/d/e 来 定义 每 个 grid 里 面 的 块 ， 这 五 个 字母 必须 按 顺序 排 布 ， 如 : 
<div class-"ui-grid-a"» 
<!--ui-barui-bar-e 来 自 于 jQueryMobile 的 样式 , 你 可 以 在 块 级 元 素 中 使 用 它们 --> 
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height: 
60px">Block A</div></div> 
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height: 
60px">Block B</div></div> 
</div> 
ui-grid-a 定义 了 一 个 两 列 grid， 所 以 grid 里 只 需要 wi-grid-a 和 ui-grid-b P^ block, 最 
终 效 果 如 图 12.58 所 示 。 


图 12.58 ”两 列 grid 


和 定 宽 grid 不 同 ，jQueryMobile 的 grid 系统 按 百 分 比 来 排 布 列 ， 网 格 总 宽度 始终 和 父 
级 元 素 相同 。 此 外 ，ui-grid-a 可 以 用 在 各 种 块 级 元 素 ， 比 如 用 于 常见 的 表单 : 


Xfieldset class="ui-grid-a"> 

<div class="ui-block-a"><button type="submit"  data-theme-"c"»Cancel 
X/button»«/div» 

<div class-"ui-block-b"»«button type="submit"  data-theme-"p"»Submit 
X/button»«/div» 
«/fieldset» 
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效果 如 图 12.59 所 示 。 


图 12.59 表单 放 入 grid 
不 难 推出 ui-grid-b、ui-grid-c 和 ui-grid-d 代表 着 三 列 、 四 列 和 五 列 的 grid: 


<div class="ui-grid-b"> 

<div class-"ui-block-a"»«div class="ui-bar ui-bar-e" style="height: 
60px"»Block A«/div»«/div» 

<div class-"ui-block-b"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»Block B«/div»«/div» 

<div class-"ui-block-c"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»Block C«/div»«/div» 
«/div» 


<div class-"ui-grid-c"» 

<div class-"ui-block-a"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»A«/div»«/div» 

<div class-"ui-block-b"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»B«/div»«/div» 

<div class-"ui-block-c"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»C«/div»«/div» 

<div class-"ui-block-d"»«div class-"ui-bar ui-bar-e" style="height: 
60px"»D«/div»«/div» 
</div> 


<div class="ui-grid-d"> 
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height: 


60px">A</div></div> 

<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height: 
60px">B</div></div> 

<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height: 
60px">C</div></div> 


<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height: 
60px">D</div></div> 

<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height: 
60px">E</div></div> 
</div> 


效果 如 图 12.60 所 示 。 


图 12.60 各 种 grid 
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要 注意 的 是 ，grid 里 面 的 wi-block-* 的 字母 顺序 一 定 不 能 乱 ， 因 为 它们 表达 着 特定 的 含 
义 ， 比 如 你 在 定义 3X3 的 grid 时 ， 可 能 需要 这 样 写 : 


<div class="ui-grid-b"> 

<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height: 
B E 

Ron SS class-"ui-bar ui-bar-e" style="height: 
" i i 

pos i eo EE class-"ui-bar ui-bar-e" style="height: 
" 3 à 

UM ud MN class-"ui-bar ui-bar-e" style="height: 
z à > 

o i EE class-"ui-bar ui-bar-e" style="height: 
E à 5 

Wo a class-"ui-bar ui-bar-e" style="height: 
P 5 ? 

RE m class-"ui-bar ui-bar-e" style="height: 
> & 2 

i c class-"ui-bar ui-bar-e" style="height: 
E ^ à 

e E class="ui-bar ui-bar-e" style="height: 
b A n 

pu M 


ui-block-a-c 需要 重复 出 现 ， 效 果 如 图 12.61 所 示 。 


图 12.61 3X3 grid 


对 于 grid 里 面 的 button, jQueryMobile 会 自动 为 其 加 上 一 定 的 左右 边 距 ， 如 果 并 排 按 
钮 的 后 面 紧 接 着 需要 单个 大 按钮 就 会 出 现 边 距 不 一 致 的 情况 ，jQueryMobile 提供 了 
ui-grid-solo 类 来 解决 这 个 问题 (实际 上 就 是 单列 的 grid，solo 的 原意 是 “独奏 ”): 


<div class="ui-grid-a"> 

<div class-"ui-block-a"»«button type-"button" data-theme="c">Previous 
</button></div> 

<div class="ui-block-b"><button type="button" data-theme="c">Next 
</button></div> 
</div> 
<div class="ui-grid-solo"> 
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<div class="ui-block-a"><button type="button" data-theme="b">More 
X/button»«/div» 
«/div» 


效果 如 图 12.62 所 示 。 


Previous Next 


图 12.62 ui-grid-solo 


虽然 jQueryMobile 只 支持 五 列 grid， 但 是 在 某 些 设 备 下 五 列 也 会 显得 很 窗 ， 你 可 以 为 
grid 添加 预 设 的 断 点 样式 ui-responsive， 使 用 了 它 你 的 grid 会 在 设备 宽度 (CSS 像素 ) 小 
于 560px (5em) 时 自动 把 所 有 的 grid EREK: 

<div class-"ui-grid-c ui-responsive"> 
<div class-"ui-block-a"»«div class-"ui-body ui-body-d"»A«/div»«/div» 
<div class-"ui-block-b"»«div class-"ui-body ui-body-d"»B«/div»«/div» 
<div class-"ui-block-c"»«div class-"ui-body ui-body-d"»C«/div»«/div» 


<div class-"ui-block-d"»«div class-"ui-body ui-body-d"»D«/div»«/div» 
«/div» 


两 种 效果 分 别 如 图 12.63 和 图 12.64 所 示 。 


图 12.63 iPad (768px) 的 效果 


o oOo 


图 12.64 iPhone (320px) 的 效果 


当然 ， 你 也 可 以 添加 自己 的 断 点 样式 ， 方 法 很 简单 : 


/* 当 宽 度 小 于 40em (640px) 时 将 所 有 容器 堆 八 起 来 */ 
Gmedia all and (max-width: 35em) ( 
-my-breakpoint .ui-block-a, 
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-my-breakpoint .ui-block-b, 
-my-breakpoint .ui-block-c, 
-my-breakpoint .ui-block-d, 
-my-breakpoint .ui-block-e { 
width: 100$; 
float: none; 
} 
1 


12.2.13 ”响应 式 组 件 一 一 reflow tables 


在 窗 小 的 屏幕 上 显示 表格 数据 是 件 非常 纠结 的 事情 ，jQueryMobile 设计 了 一 种 名 为 


reflow table (ERRO 的 组 件 来 优化 这 一 问题 ， 它 的 主要 功效 是 在 较 窗 屏 幕 上 将 行 数据 
堆 三 为 一 个 二 列 〈 标 签 /数据 ) 表 的 形式 。 


要 使 表格 具有 此 神力 ， 需 要 在 table 元 素 加 上 data-role="table" 属 性 确保 你 的 表格 拥 


有 thead 和 tbody 7525): 


<table data-role-"table" data-mode-"reflow" class-"ui-responsive table 
-stroke"» 
<thead> 
«tr» 
«th»Rank«/th» 
«th»Movie Titlec/th» 
«th»Year«/th» 
<th><abbr title-"Rotten Tomato Rating"»Rating«/abbr»«/th» 
«th»Reviews«c/th» 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>1</th> 
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel= 
"external">Citizen Kane</a></td> 
<td>1941</td> 
<td>100%</td> 
<td>74</td> 
</tr> 
<tr> 
<th>2</th> 
<td><a href="http://en.wikipedia.org/wiki/Casablanca (film)" data- 
rel="external">Casablanca</a></td> 
<td>1942</td> 
<td>97%</td> 
<td>64</td> 
«/tr» 
tr 
«th»3«/th» 
<td><a href-"http://en.wikipedia.org/wiki/The Godfather" data-rel- 
"external"»The Godfather«/a»«/td» 
«td»1972«/td» 
«td»97$«/td» 
«td»87«/td» 
«/tr» 
«tr» 
«th»4«/th» 
<td><a 
href-"http://en.wikipedia.org/wiki/Gone with the Wind (film)" 
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data-rel-"external"»Gone with the Wind</a></td> 
«td»1939«/td» 
«td»962«/td» 
«td»587«/td» 
«/tr» 
</tbody> 
</table> 


同样 会 有 两 种 效果 分 别 如 图 12.65 和 图 12.66 所 示 。 


Rank Movie Title Year Rating Reviews 
1 Citizen Kane 1941 100% 74 
2 Casablanca 1942 97% 64 
3 The Godfather 1972 97% 87 
4 Gone with the Wind 1939 96% 87 


图 12.65 较 宽 屏幕 (大 于 560px) 


Rank 1 

Movie Title Citizen Kane 
Year 1941 

Rating 100% 


Reviews 74 


Rank 2 


Movie Title Casablanca 


Year 1942 
Rating 97% 
Reviews 64 


图 12.66” 较 罕 屏 幕 〈 小 于 560px) 


和 grid 一 样 , 断 点 样式 由 ui-responsive 类 来 决定 , 如 果 不 指定 ui-responsive, 那么 table 
直接 会 变 成 后 一 种 显示 效果 (因为 明确 指定 了 data-mode-"reflow"). 
自 定义 断 点 的 方法 和 grid 依然 类 似 : 
@media (min-width: 480px) { 
/* 显示 所 有 表格 的 标题 行 ， 将 所 有 单元 格 设置 为 display: table-cell */ 


.my-custom-breakpoint td, 
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-my-custom-breakpoint th, 
-my-custom-breakpoint tbody th, 
.my-custom-breakpoint tbody td, 
.my-custom-breakpoint thead td, 
-my-custom-breakpoint thead th { 

display: table-cell; 

margin: 0; 
} 
/* 隐藏 每 个 单元 格 里 的 label */ 
.my-custom-breakpoint td .ui-table-cell-label, 
.my-custom-breakpoint th .ui-table-cell-label { 

display: none; 


12.2.14 ”响应 式 组 件 一 一 Column Toggle tables 


Column Toggle 是 另 一 种 在 罕 屏 幕 显示 表格 的 模式 。 它 的 基本 思路 是 在 不 同 宽度 的 屏幕 
下 显示 不 同 数目 的 列 ， 你 可 以 手工 指定 每 一 列 的 优先 级 〈 通 过 data-priority 属性 )， 高 优先 
级 的 列 会 被 保留 : 


<table data-role-"table" id-"table-column-toggle" data-mode- "columntoggle" 
class-"ui-responsive table-stroke"» 
<thead> 
<tr> 
<!-- 随 着 屏幕 变 窗 ， 列 会 按照 优先 级 从 低 (5) 到 高 (1) 消失 --> 
<th data-Priority="2">Rank</th> 
<th>Movie Title</th> 
«th data-priority="3">Year</th> 
«th data-priority="1"><abbr  title-"Rotten Tomato  Rating"»Rating 
X/abbr»«/th» 
«th data-priority-"5"»Reviews«/th» 
</tr> 
</thead> 
<tbody> 
«tr» 
«th»1«/th» 
<td><a href-"http://en.wikipedia.org/wiki/Citizen Kane" data-rel-" 
external"»Citizen Kane</a></td> 
«td»1941«/td» 
«td»100$«/td» 
«td»74«/td» 
</tr> 
<tr> 
<th>2</th> 
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data- 
rel="external">Casablanca</a></td> 
<td>1942</td> 
<td>97%</td> 
<td>64</td> 
</tr> 
<tr> 
<th>3</th> 
<td><a href="http://en.wikipedia.org/wiki/The Godfather" data-rel= 
"external">The Godfather</a></td> 
<td>1972</td> 
<td>97%</td> 
<td>87</td> 
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IE 
«tr» 
«th»4«/th» 
<td><a href-"http://en.wikipedia.org/wiki/Gone with the Wind (film)" 
data-rel-"external"»5Gone with the Wind«/a»«/td» 
«td»1939«/td» 
«td»96$«/td» 
«td587«/td» 
«/tr» 
</tbody> 
</table> 


在 iPhone 这 样 的 宽度 下 ，Rank、Year 和 Reviews 三 列 都 会 隐藏 ， 如 图 12.67 所 示 。 


Columns... 
Movie Title Rating 
Citizen Kane 10096 
Casablanca 9796 
The Godfather 9796 
Gone with the Wind 96% 


图 12.67 columntoggle 模式 的 表格 


贴心 的 是 ， 表 格 右上 角 还 出 现 了 一 个 用 于 选择 显示 列 的 按钮 ， 如 图 12.68 所 示 。 


Rank 
Rank Movie Title 
Year 

1 Citizen 

Kano Rating 
2 Casablanca Reviews 
3 The 9796 87 

Godfather 
4 Gone with 96% 87 

the Wind 

图 12.68” 列 选择 


要 注意 tite 一 列 并 没有 出 现在 列 选择 当中 ， 这 是 因为 我 们 没有 为 title 列 设置 


“6° 
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data-priority， 默 认 情 况 下 该 列 不 会 被 隐藏 。 

在 jQueryMobile 的 响应 式 表 格 中 ， 最 多 支持 六 个 优先 级 (1~6)， 你 可 以 自己 定义 断 点 
样式 以 控制 每 一 个 优先 级 的 列 在 多 宽 的 屏幕 下 应 该 消失 : 

/* 优先 级 为 2 的 列 在 320px (20em X 16px) 宽 的 屏幕 下 显示 */ 


Gmedia screen and (min-width: 20em) ( 
-my-custom-class th.ui-table-priority-1, 
-my-custom-class td.ui-table-priority-1 ( 

display: table-cell; 
l 


} 
/* 优先 级 为 2 的 列 在 480px (30em X 16px) 宽 的 屏幕 下 显示 
Gmedia screen and (min-width: 30em) { 
.my-custom-class th.ui-table-priority-2, 
.my-custom-class td.ui-table-priority-2 ( 
display: table-cell; 
} 


:你 可 以 仿造 上 面 继续 写 更 多 的 断 点 样式 .. . 


由 于 CSS 特殊 性 Cspecificity) 的 原因 ,你 的 自 定义 断 点 样式 后 面 还 需要 跟 上 用 于 控制 
单元 格 隐藏 和 显示 的 样式 : 


.my-custom-class th.ui-table-cell-hidden, 

.my-custom-class td.ui-table-cell-hidden ( 
display: none; 

) 

.my-custom-class th.ui-table-cell-visible, 

.my-custom-class td.ui-table-cell-visible ( 
display: table-cell; 

) 


此 时 ， 你 已 经 可 以 在 你 的 table 上 使 用 class=" my-custom-class" 来 应 用 断 点 啦 。 
对 于 默认 情况 〈ui-responsive) 的 断 点 样式 可 以 参考 表 12-1。 


* 
eS 


表 12-1 默认 断 点 样式 


在 屏幕 宽度 为 320px (20em) 时 显示 该 列 
在 屏幕 宽度 为 480px GOem) 时 显示 该 列 
在 屏幕 宽度 为 640px (40em) 时 显示 该 列 
在 屏幕 宽度 为 800px (50em) 时 显示 该 列 
在 屏幕 宽度 为 960px (60em) 时 显示 该 列 
在 屏幕 宽度 为 1,120px (70em) 时 显示 该 列 


data-priority-"2" 
data-priority-"3" 


data-priority-"4" 


data-priority—"6" 
如 果 你 的 数据 不 太 适 合 这 些 预 设 断 点 ， 那 么 强烈 建议 你 自 定义 断 点 样式 。 

12.2.15 ”响应 式 组 件 一 一 sliding panels 
sliding panels 是 个 非常 有 意思 的 组 件 ， 最 初 这 个 交互 形式 来 源 于 iPhone 的 一 些 APP, 


你 可 以 把 菜单 放 入 panel 之 中 ，panel 默认 隐藏 在 屏幕 两 侧 ， 然 后 通过 单 击 或 者 滑动 手势 将 
菜单 唤 出 ， 这 种 设计 既 节省 屏幕 空间 ， 也 非常 方便 用 户 操作 。jQueryMobile 在 1.3 之 后 的 


< 
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版 本 引入 了 自己 的 sliding panel 实现 。 
panel 的 使 用 和 popup 类 似 , 使 用 data-role="panel" 来 定义 一 个 panel, 默认 情况 下 panel 
会 被 隐藏 ， 你 可 以 通过 链接 来 打开 一 个 panel: 
<div data-role-"content"» 
<a href-"fpanell" data-role-"button"»open panel</a> 
«/div» 
<div data-role-"panel" id-"panell"» 
panel content 
«/div» 


fili open panel 后 效果 是 panel 从 屏幕 左 侧 推出 来 ， 单 击 非 panel 区 域 或 者 在 panel 区 
域内 手指 左 滑 panel 会 自动 消失 ， 如 图 12.69 所 示 。 
iOS 模拟 器 - iPhone Retina (3.5-inch) / iOS 7.0 (11A465) 
Carrier 全 3:00 PM -— | 
[v] 


lm. 


localhost 


panel content 


图 12.69 基本 的 sliding panel 


要 注意 的 是 panel 元 素 本 身 不 能 放置 在 content 元 素 里 面 ， 它 必须 作为 content, header 
或 footer 的 兄弟 元 素 出 现 ， 另 外 panel 有 三 种 出 现 的 特效 ， 在 panel 里 面 出 现 的 
data-rel="close" 按 钮 可 以 控制 当前 panel 的 关闭 : 


<div data-role="content"> 
panel 有 Overlay、Reveal 和 Push 三 种 显示 的 方式 : <br> 
<a href="#leftpanell" data-role="button">Reveal</a> 
<a href="#leftpanel2" data-role="button">Push</a> 
<a href="#leftpanel3" data-role="button">Overlay</a> 
</div> 


<div data-role-"panel" id-"leftpanell" data-position-"left" data-display 
-"reveal"^ 

Xh3»Left Panel: Reveal«/h3» 

<p>This panel is positioned on the left with the reveal display mode. The 
panel markup is «em»afterc/em» the header, content and footer in the source 
order.«/p» 

<p>To close, click off the panel, swipe left or right, hit the Esc key, 
or use the button below:</p> 

<a href-"£demo-links" data-rel-"close" data-role-"button" data-icon- 


"delete" data-inline-"true"»5Close panel«/a» 
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</div> 


<div data-role-"panel" id-"leftpanel2" data-position-"left" data-display- 
"Push"> 

<h3>Left Panel: Push</h3> 

<p>This panel is positioned on the left with the push display mode. The 
panel markup is «em»after«/em» the header, content and footer in the source 
order.«/p» 

<p>To close, click off the panel, swipe left or right, hit the Esc key, 
or use the button below:«/p» 

<a href-"£demo-links" data-rel-"close" data-role-"button"  data-icon- 
"delete" data-inline-"true"»Close panel</a> 
«/div» 


<div data-role-"panel" id-"leftpanel3" data-position-"right" data-display 
-"overlay" > 

Xh3»Left Panel: Overlay</h3> 

<p>This panel is positioned on the left with the overlay display mode. The 
panel markup is «em»after«/em» the header, content and footer in the source 
order.«/p» 

<p>To close, click off the panel, swipe left or right, hit the Esc key, 
or use the button below:«/p» 

Xa href-"£demo-links" data-rel-"close" data-role-"button"  data-icon- 
"delete" data-inline-"true"»Close panelc/a» 
«/div» 


data-position 用 于 控制 panel 从 哪 边 出 现 ，data-display 用 于 控制 panel 显示 时 的 动画 特 
效 ， 默 认 情 况 是 reveal 特效 ， 下 面 图 12.70 和 图 12.71 分 别 是 Push 和 Overlay 的 效果 。 


pane 
Left Panel: Push 显示 


This panel is positioned on the left 
with the push display mode. The 
panel markup is after the header, 
content and footer in the source 
order. 


To close, click off the panel, swipe 
left or right, hit the Esc key, or use 
the button below: 


€3 Close panel 


图 12.70 MÆ Push 的 效果 


rs 
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pane 
显示 Left Panel: Overlay 


This panel is positioned on the left 
with the overlay display mode. 
The panel markup is after the 
header, content and footer in the 
source order. 


To close, click off the panel, swipe 
left or right, hit the Esc key, or use 
the button below: 


€3 Close panel 


图 12.71 从 右 Overlay 的 效果 


如 果 你 不 需要 动画 效果 ， 可 以 通过 data-animate="false" 来 关闭 。 
和 其 他 容器 类 似 ，panel 本 身 可 以 进行 主题 化 ，data-position-fixed="true" 属 性 则 可 以 让 
panel 不 随 主 界面 内 容 的 滚动 而 滚动 。 


12.2.16 ”主题 化 和 themeroller 


前 面 的 章节 中 不 断 地 提 到 jQueryMobile 的 主题 化 , 实际 上 jQueryMobile 的 主题 化 远 不 
IE a-e 五 个 字母 那么 简单 。 为 了 更 广泛 地 获取 开发 者 和 用 户 ，jQueryMobile 在 很 早期 的 版 
本 就 放出 了 多 个 主题 包 ， 而 且 还 推出 了 强大 的 themeroller 一 一 一 个 可 视 化 主题 制作 工具 ， 
你 甚至 不 需要 懂 一 行 css 代码 ， 仅 靠 拖 电 就 能 设计 一 套 自 己 的 主题 
(http://jquerymobile.com/themeroller/)， 如 图 12.72 所 示 。 


Sample text and links. Sample text and links. Med nic. 
List Header List Hender. 
Read-only list tom. Read-only list item. 
Linked tet tem o © Linked lat tem © 
© madio © Radio 
Checkbox 
a- 
o Option 1 © 
Tert input 
~ a 
o Button 


图 12.72 themeroller 界面 
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themeroller 的 使 用 非常 傻瓜 化 ， 基 本 上 是 为 设计 师 所 设计 的 工具 ，3 


面板 可 以 添加 多 


达 26 个 调 板 〈swatch)， 每 一 个 调 板 都 是 一 个 data-theme 可 以 指定 的 字母 ， 调 板 里 可 以 看 


图 12.73 所 示 。 


ThemeRoller 


Swatch A 

» Header/Footer Bar 
» Content Body 

7 Button: Normal 


TEXT COLOR Jabo 
TEXT 1px 
SHADOW 


BACKGROUND #eeeeee | 
BORDER 大 cccccc 

* Button: Hover 
TEXT COLOR PARZ 


TEXT 0 


ipx 
SHADOW 


BACKGROUND #dfdfdf | 


BORDER 4bbbbbb. 


7 Button: Pressed 


TEXT COLOR [4253646] 
TEXT 0 ipx 
SHADOW 


BACKGROUND #d6d6dE 


BORDER "sbbbbbb. 


Delete Duplicate 


到 主要 的 UI 组 件 用 于 预览 。 项 部 有 一 个 Inspector 按钮 ， 开 启 后 可 以 像 审 查 元 素 那 样 在 主 
面板 里 选择 不 同调 板 的 UI 组 件 ， 同 时 左边 对 应 着 当前 选择 的 元 素 可 配置 的 具体 选项 ， 比 
如 选择 一 个 button 后 ， 你 可 以 在 左边 更 改 button 的 边框 、 圆 角 、 


Dra 
swatches » 


NN 
i LIGHTNESS e. 


O A 


# FFF 
Sample text and links. 


List Header 


Read-only list item 


Linked list item 


© Radio 


0 


Checkbox 


^ E 


m Option 1 


Text Input 


50 CHEN 


图 12.73 themeroller 的 基本 使 用 


背景 和 字体 颜色 等 等 ， 如 


yo) 


à color onto an element below or pick from the 


SATURATION 


为 了 方便 设计 师 调 色 ， 主 面板 上 方 还 有 一 个 调 色 板 ， 你 可 以 在 调 好 色 后 直接 将 色 块 拖 
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忠 到 调 板 的 元 素 中 去 便 应 用 好 了 甚至 将 阴影 样式 都 自动 调整 好 了 )， 如 图 12.74 所 示 。 


Dro; cca onto an element below or pick from the o Adobe Kuler Recent Colors colors... 
swatches » 
EH 
[| l| mmNEN | smgS || | -N m. | 
|- LIGHTNESS SATURATION e 


图 12.74 themeroller 调 色 板 


在 你 完成 主题 设计 后 , 可 以 通过 单 击 顶部 的 工具 栏 的 Download theme zip file 按钮 来 下 
载 主题 包 ， 单 击 后 会 弹出 一 个 对 话 框 ， 会 告知 如 何 使 用 下 载 后 的 文件 ， 此 时 为 你 的 主题 起 
好 名 字 ， 再 单 击 Download Zip 便 可 以 下 载 目 标 文件 了 ， 如 图 12.75 所 示 。 


OE 


Download Theme Theme Nome 
This will generate a Zip file that contains both a compressed (for production) and uncompressed (for editing) version 
of the theme. 


To use your theme, add it to the head of your page before the jquery.mobile.structure file, like this: 


<IDOCTYPE html» 
<html> 
<head> 


<title>jQuery Mobile page</title> 
<meta charset="utf-8" /> 

Irta none"viewport” oontentm"widtidevioe width, initial-soale=i"> 
<link rel="stylesheet" hrefe"css/themos/my-custom-theme.css 
<link rel="stylesheet" hrefe"http://code. jquery.com/mobile/1. 
<soript sron"http://code.jquary.com/jqoary-1.9.1.nin.ja"></soript> 
<script src="http://code. jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 


/jquery.mobile.structure-1.3.2.min.css" /> 


</head> 


.l.. Tip: To edit your theme later, use the import feature to c m à n 
! paste in the uncompressed theme file lose ownload Zip 


Text Input Text input Text input 


图 12.75 themeroller 下 载 界面 


下 载 的 打包 文件 中 包含 一 个 带 有 说 明和 效果 预览 的 html 文件 ,生成 的 源码 mytheme.css 
以 及 压缩 好 的 mytheme.min.css 文件 ， 非 常 贴心 。 

你 也 可 以 从 默认 主题 或 者 别人 做 好 的 主题 里 导入 调 板 ， 然 后 进行 再 创作 ， 如 图 12.76 
所 示 。 

甚至 还 可 以 分 享 你 设计 的 主题 ， 如 图 12.77 所 示 。 


12.2.17 tW 


jQueryMobile 的 基础 知识 介绍 到 这 里 就 已 经 告 一 段落 了 ， 如 果 你 在 使 用 jQueryMobile 
的 过 程 中 遇 到 了 疑惑 或 者 难点 ， 首 先 推荐 去 jQueryMobile 的 官方 文档 
(http://apijquerymobile.com/) 查阅 相关 的 事件 、 方 法 、 属 性 以 及 组 件 API 等 等 , 在 官方 F&Q 
C http://view.jquerymobile.com/1.3.2/dist/demos/fag/ ) 里 你 可 以 查阅 到 一 些 有 意义 的 常见 问 
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题 ，demos 里 面 Chttp://view.jquerymobile.com/1.3.2/dist/demos/examples/) 则 有 许多 利用 组 
件 的 在 线 例 子 。 基 本 上 熟练 用 好 这 些 ，jQueryMobile 已 经 没什么 会 难 到 你 了 。 


Import Theme Import Default Theme 


Upgrode to version 


box-shadow: 0 0 12px 4 387bbe /* (global-active-background-color) */; 
H 
/* unset box shadow in browsers that don't do it right 


-ui-mobile-nosupport-boxshadow * ( 
-moz-box-shadow: none limportant; 
-webkit-box-shadow: none !important; 
box-shadow: none 'important; ! 

H 

/* ...and bring back focus */ 

-ui-mobile-nosupport-boxshadow .ui-focus, 

-ui-mobile-nosupport-boxshadow .ui-btn:focus, 

-ui-mobile-nosupport-boxshadow .ui-link-inherit:focus ( 
outline-width: 1px; 
outline-style: auto; 


I, Copy and paste the contents of any uncompressed 
! jQuery Mobile theme file to load it in for editing. Cancel Import | 


TFA I T ET 


图 12.76 导入 主题 到 themeroller 


Share Theme 


Use this link to share a copy of your theme. People can download or edit a copy of the theme, but your 
version won' t be changed. 


http://jquerymobile.com/themeroller/?ver-1.3.2&style id-20131019-6| 


¿I Important note: We can only store this theme URL on the server for 30 days, 
V then it will be deleted. Download a theme to keep a copy safe that you can 
import later. 


Cu bd TL 


图 12.77 分 享 主题 


jQueryMobile 从 发 布 之 时 起 就 是 开源 的 ， 如 果 你 是 一 个 资深 的 jQueryMobile 开发 者 ， 
你 也 可 以 投身 参与 开源 社区 的 工作 ，jQueryMobile 现在 托管 于 github 上 
(https://github.com/jquery/jquery-mobile)， 你 可 以 通过 pull request 的 方式 为 jQueryMobile 
项 目 添砖加瓦 。 
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用 户 体验 ? Sencha Touch 为 王 。Sencha Touch 项 目 脱胎 于 ExtJs, Sencha Touch 诞生 后 
便 以 其 接近 本 地 APP 的 良好 体验 以 及 丰富 而 专业 的 功能 吸引 了 众多 的 开发 者 , 目前 最 新 版 
本 号 已 经 推 到 了 2.3。 本 章 将 详细 讲解 该 平台 。 


[09] 
— 
S 


Sencha Touch 是 一 个 性 能 出 众 的 HTML 5 应 用 程序 框架 , 相 较 于 jQueryMobile, Sencha 
更 多 的 瞄准 了 高 端 设 备 ， 以 便 在 这 些 设备 上 提供 更 出 众 的 用 户 体验 ， 包 括 IOS. Android, 
BlackBerry 和 Windows Phone 等 。 

Sencha Touch 号 称 是 一 个 Mobile HTML 5 平台 , 它 包含 这 样 一 些 主要 特性 , 如 下 所 示 。 


1. 完全 的 HTML 5 技术 


Sencha Touch 采用 了 大 量 HTML 5 技术 来 构建 ， 抛 弃 了 许多 不 支持 HTML 5 的 设备 ， 
以 让 你 的 程序 跑 的 更 快 更 好 ， 开 发 者 能 更 容易 的 开发 。 


2. 平滑 的 动画 和 滚动 

可 以 说 ，Sencha Touch 提供 了 市 面 上 Web 应 用 框架 里 最 好 的 用 户 体验 ， 流 畅 的 动画 和 
平滑 的 滚动 使 得 基于 Sencha Touch 构建 的 Web 应 用 几乎 可 以 媲美 原生 应 用 。 

3. 可 响应 (Adaptive) 的 布局 


Sencha Touch 的 布局 引擎 使 得 创建 快速 可 响应 的 应 用 界面 轻而易举 。 而 且 这 些 精确 到 
像素 级 的 布局 可 以 迅速 在 竖 屏 横 屏 状态 进行 切换 一 一 就 和 你 的 os 应 用 一 样 。 

4. 本 地 打包 

你 的 用 户 是 不 会 关心 应 用 究竟 采用 什么 样 的 技术 来 开发 ， 但 是 你 的 用 户 可 能 来 自 于 
APP Store 或 者 其 他 应 用 分 发 渠道 ， 这 使 得 你 不 得 不 考虑 成 本 更 高 的 原生 应 用 。 幸 运 的 是 ， 
Sencha Touch 除了 应 用 本 身 提供 了 媲美 原生 应 用 的 用 户 体验 ， 还 提供 了 一 套 本 地 打包 工具 
(基于 Apache Cordova 技术 ), 使 得 你 可 以 在 应 用 商店 发 布 程序 一 一 并 且 还 可 以 利用 大 量 本 
地 应 用 才能 利用 的 接口 ， 如 加 速 器 、 联 系 人 和 摄像 头等 等 。 


5. 不 仅仅 是 丰富 的 组 件 
和 jQueryMobile 一 样 ，Sencha Touch 也 提供 了 一 整套 的 UI 组 件 ， 同 时 它 还 提供 了 更 
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多 的 东西 ， 包 括 内 建 的 MVC 系统 、AJAX、DOM、 特 性 检测 、 地 理 API 封装 和 触摸 事件 


甚至 一 大 堆 图 标 …… 基本 上 ， 有 了 Sencha Touch 这 个 大 而 全 的 开发 框架 ， 你 基本 上 不 再 需 


要 其 他 技术 方案 了 。 
6. 主题 


Fri 


Sencha Touch H 2.3 版 本 开始 提供 了 一 堆 模拟 特定 平台 的 主题 ， 这 样 你 的 应 用 更 加 像 


原生 应 用 了 ， 如 图 13.1 所 示 。 


Sliders 


€ Back Sliders Source 


Single Thumb Single Thumb 


Multiple Thumbs 
Multiple Thumbs. 


Sliders 


Single Thumb 


Multiple Thumbs 


Toggle 
CK ® 


图 13.1 Sencha Touch 主题 


I Sliders [ Source | 


Single Thumb 


Multiple Thumbs 


Toggle 


© Sliders 


Single Thumb 
—a 


source 


Disabled Sngle Thumb 
= 


Multiple Thumbs 
. . 


Togge 


可 以 看 到 Sencha 团队 提供 了 各 大 移动 平台 原生 应 用 的 主题 包 , 包括 iOS6、7, Android, 
Windows 8/Phone 等 ， 你 的 目标 程序 可 以 在 不 改变 源 代 码 的 前 提 下 打包 到 各 大 移动 平台 的 


市 场 上 去 买 ， 不 亦 乐平 ? 


是 不 是 听 上 去 很 诱 人 ? 接 下 来 ， 让 我 们 正式 的 认识 认识 她 ! 


13.2 bonjour, Sencha Touch! 


£e 


Sencha JF A Hi AE d$ SHIRE 


; THE T jQueryMobile 


只 需要 一 个 文本 编辑 器 而 言 ， 
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Sencha Touch 应 用 的 开发 环境 搭建 就 复杂 了 许多 ， 以 下 是 必 备 的 软件 & 环 境 。 

口 现代 浏览 器 (如 Chrome) : Chrome 等 现代 浏览 器 带 有 完备 的 调试 环境 , 对 于 Sencha 

Touch 应 用 的 开发 非常 有 帮助 。 

口 Sencha Cmd: Sencha 应 用 的 命令 行 工具 ， 用 于 生成 框架 代码 以 及 打包 编译 部 署 应 
用 等 工作 (包括 基于 Sencha Touch, ExtJs 等 SDK 的 应 用 ) . Sencha Cmd 的 下 载 
安装 可 以 参考 http://www.sencha.com/products/sencha-cmd/download。 安装 完毕 之 后 
你 可 以 在 命令 行 直接 输入 sencha 查看 命令 帮助 。 

口 Ruby 环境 (1.9.3) : Sencha 会 利用 Ruby 进行 CSS 文件 的 编译 。 (Window、Mac 

和 Linux 安装 Ruby 的 方式 各 不 相同 ， 你 可 以 择 需 进行 ) 。 

有 了 以 上 准备 工作 , 你 便 可 以 开始 Sencha Touch 程序 的 构建 了 , 首先 去 官网 下 载 Sencha 
Touch SDK 包 (http:/www.sencha.com/products/touch/download/ ) ， 将 下 载 后 的 压缩 包 
(2.3.0-gpl 版 本 的 压缩 包 大 概 96MB) 解压 到 你 项 目的 目录 下 一定 确保 该 目录 使 你 的 Web 
服务 器 可 以 访问 的 ， 因 为 应 用 有 许多 代码 都 从 该 目录 引用 ): 


$ cd your-project/webroot/sencha-touch-2.n/ 


导航 到 这 个 目录 下 你 可 以 看 到 sencha-teuch 本 身 的 目录 结构 大 致 如 下 : 


SETUP .html 

SenchaLogo .png 
build.xml 

builds 

cmd 

docs 

examples 
file-header.txt 
index.html 
license.txt 
microloader 
release-notes.html 
resources 
sencha-touch-all-debug.js 
sencha-touch-all.js 
sencha-touch-debug.js 
sencha-touch.js 

SEG 

version.txt 


此 时 你 可 以 通过 sencha generate app 命令 利用 sencha touch 的 SDK 生成 一 个 新 的 空 
app: 

$ sencha generate app MyApp ../MyApp 

上 面 命令 的 含义 是 在 上 级 目录 的 MyApp 目录 生成 一 个 名 为 MyApp 的 应 用 ,而且 应 用 
内 的 模板 代码 的 命名 空间 均 将 被 设置 为 MyApp， 你 可 以 通过 sencha cmd 工具 自 带 的 
webserver 来 host 你 生成 的 程序 (或 其 他 任何 webserver): 


$ sencha fs web -port 8000 start -map ./MyApp 


然后 打开 http://localhost:8000， 将 可 以 看 到 我 们 可 爱 的 应 用 ， 如 图 13.2 所 示 。 


* 346 * 


第 13 Æ Sencha Touch 
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localhost 


Welcome to Sencha Tou 


s 
N 


You've just generated a new Sencha 
Touch 2 project. What you're looking at 
right now is the contents of 
app/view/Main.js - edit that file and refresh 
to change what's rendered here. 


4 pm 
图 13.2 默认 Sencha Touch 模板 程序 


最 终生 成 应 用 模板 的 项 目 目录 结构 和 含义 大 概 是 : 


[一 MyApp 
| app # 应 用 源码 (包括 Models. Views. Controllers 和 Stores 等 内 容 ) 
| b app.js # 应 用 程序 的 入 口 
| bL app.json # 应 用 的 配置 文件 
| | buildq.xml # 构建 配置 
| L ingex.html $ AO html 文件 
| E packager.json # 在 打包 为 原生 应 用 时 需要 用 到 的 配置 文件 
packages 
| HF resources + 所 有 资源 文件 
L— touch 4 touch SDK 的 复制 
touch-2.3.0 


= SETUP.html 
OnE 
appjs 是 整个 应 用 的 入 口 ， 但 是 这 个 文件 手动 修改 时 一 定 要 小 心 ， 因 为 sencha cmd T 
具 会 在 生成 后 续 代 码 时 往 该 文件 写 入 内 容 。 
找到 Mainjs 文件 ， 你 可 以 看 到 这 样 的 一 个 文件 : 
Ext.define('Demo.view.Main', { 
extend: 'Ext.tab.Panel', 
xtype: 'main', 
requires: [ 
'Ext.TitleBar', 


'Ext.Video' 
l; 
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这 是 主 视图 的 代码 ， 找 到 行 : 


将 其 修改 为 : 
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修改 为 : 


title: 'Sencha Touch 2 的 世界 ' 


保存 并 刷新 ， 你 可 以 看 到 界面 相应 UI 元 素 的 内 容 更 改 了 ， 如 图 13.3 所 示 。 


OS 3338 — iPhone Retina (3.5-inch) / iOS 7.0 (11A465) 
Carrier 全 3:46 PM L d 


localhost 


Sencha Touch 2 的 世界 


You've just generated a new Sencha 
Touch 2 project. What you're looking at 
right now is the contents of 
app/view/Main.js - edit that file and refresh 
to change what's rendered here. 


< p" 
图 13.3 Sencha Touch 默认 程序 


从 这 里 你 应 该 能 够 感受 到 ，Sencha 和 其 他 的 框架 非常 的 不 同 (尤其 是 jQuery RR), 
Sencha 的 应 用 有 着 严格 的 编码 要 求 , Sencha Touch 框架 本 身 会 接管 整个 移动 Web 应 用 的 生 
命 周 期 ， 作 为 应 用 开发 者 只 需要 关注 你 的 业务 架构 和 业务 逻辑 代码 ， 框 架 本 身 几 乎 提供 了 
一 切 你 所 需 的 内 容 。Sencha 所 有 的 UI 元 素 都 由 框架 本 身 提 供 ， 而 建立 UI 元 素 的 方式 也 是 
单纯 通过 JavaScript 代码 实现 。 而 且 大 部 分 代码 都 是 类 似 JSON 配置 的 声明 式 结构 ， 上 手 
难度 并 不 高 。 

接 下 来 我 们 搭建 一 个 稍微 复杂 的 程序 来 说 明 Sencha Touch 的 基本 使 用 ， 在 这 之 前 ， 你 
可 以 将 appjs 和 main.js 两 个 生成 的 模板 源码 给 删 掉 。 


13.3 第 一 个 Sencha Touch 程序 


我 们 接 下 来 要 搭建 的 这 个 应 用 包含 一 个 首页 、 一 个 联系 人 表单 和 一 个 博客 列表 ， 用 户 
可 以 查看 博客 内 容 。 
首先 要 做 的 是 建立 程序 入 口 Cappjs?: 


“Ms 
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Ext.application({ 
name: "Demo", 


launch: function() { 
Ext.create("Ext.tab.Panel", { 
fullscreen: true, 
items: [ 
t 

title: 'Home', 
iconCls: 'home', 
html: 'Welcome' 


和 预期 的 一 样 ， 刷 新 页 面 后 一 个 TabPanel 控件 将 出 现在 屏幕 顶部， 页 面 中 会 出 现 一 名 
Welcome， 如 图 13.4 所 示 。 
iOS 模拟 器 — iPhone Retina (4-inch) / iOS 7.0 (11A465) 


Carrier ^ 10:50 PM — 
localhost © 
Welcome 


图 13.4” 带 标题 的 Panel 


简单 说 来 ， 上 面 那 段 代码 将 会 做 这 样 一 些 事情 : 


// 新 建 一 个 application 
Ext.application(í 


name: 'Blog', 
// 应 用 启动 时 将 会 调用 launch 
launch: function() ( 
// 创 建 Ext.tab.Panel 类 的 一 个 实例 
Ext.create("Ext.tab.Panel", ( 
// 以 下 都 是 配置 参数 
fullscreen: true, 
items: [ 
t 
//panel 标题 
title: 'Home', 
// 用 于 标明 ICON 的 class, home 是 一 个 小 房子 图 标 
iconCls: 'home', 
//panel 里 的 HTML 内 容 
html: 'Welcome' 


H): 
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接 下 来 我 们 为 页 面 


Ext.application((í 
name: "Demo", 


m 


增加 一 些 欢 迎 信 息 ， 并 且 把 tabBar 的 位 置 调整 到 屏幕 底部 : 


launch: function() ( 
// 创 建 Ext.tab.Panel 类 的 一 个 实例 
Ext.create("Ext.tab.Panel", ( 
// 以 下 都 是 配置 参数 
fullscreen: true, 
tabBarPosition: 'bottom', 


items: [ 
{ 
title: 'Home', 
iconCls: 'home', 


//html 是 panel 内 的 内 容 
html: [ 
"<img src-"http://staging.sencha.com/img/sencha.png" 
fx 
'X«hi»Welcome to Sencha Touch</h1>', 


"Xp»You're creating the Getting Started app. This 
demonstrates how ", 


"to use tabs, lists, and forms to create a simple 
app</p>", 
"<h2>Sencha Touch</h2>' 
上 mi 


此 时 界面 效果 如 图 13.5 所 示 。 


Welcome to Sencha Touch 

You're creating the Getting Started app. 
This demonstrates how to use tabs, 
lists, and forms to create a simple app 
Sencha Touch 


《 m qm 
图 13.5 tabBar 移 到 下 面 去 
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看 起 来 似乎 页 面 内 容 加 点 padding 会 更 美观 ， 你 可 以 通过 cls 选项 来 为 元 素 添加 class: 


你 可 以 通过 编辑 app.json 文件 来 改变 引用 的 CSS 文件 , 进而 在 CSS 文件 里 定义 你 想 要 
的 样式 。appjson 中 包含 非常 多 的 配置 项 ， 下 面 是 一 个 典型 的 appjson 文件 : 
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"resources/icons", 
"resources/startup" 


l, 


"ignore": [ 
"Na svn" 


l, 


"archivePath": "archive", 


"requires": [ 


l, 


"id": "d086c80b-62fa-4a93-865d-f805de2c4a2e" 


不 过 我 们 目前 不 需要 知道 所 有 的 配置 项 是 什么 意思 ， 比 如 上 例 中 home class 的 定义 可 
以 写 在 resources/css/app.css 里 面 : 


.home ( 
padding: 10px; 


此 时 我 们 的 应 用 又 稍微 好 看 了 那么 一 点 点 ， 如 图 13.6 所 示 。 


Welcome to Sencha Touch 

You're creating the Getting Started 
app. This demonstrates how to use 
tabs, lists, and forms to create a 
simple app 

Sencha Touch 


E pr eor 


图 13.6 引用 样式 


此 时 你 可 以 从 chrome devtools 中 看 到 最 终 Sencha 为 你 生成 的 DOM 树 是 什么 样子 , 如 
图 13.7 所 示 。 
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v<html manifest lang-"en-US"» 
> «head id-"ext-element-1"»..«/head» 
v «body screen capture injected-"true" id-"ext-element-3" style="width: 


100% 'important; height: 100% 'important;" class-"x-desktop x-macos x- 
chrome x-webkit x-landscape"- 


><div id-"appLoadingIndicator"»..«/div» 


v «div class-"x-container x-sized" id-"ext-viewport" style="width: 100% 
!important; height: 100% 'important;"» 
v «div class-"x-body" id-"ext-element-4"» 
Y «div class-"x-inner x-layout-card" id-"ext-element-2"» 
v «div class-"x-container abpanel x-fullscreen x-layout-card-item 
x-sized" ii xt-tabpanel-: 
x-dock x-dock-vertical x-sized" ext-element-9"» 


ext-element-7"» 
h 4 
«hi»Welcome to Sencha Touch«/hi» 
> <p>..</p> 
<h2>Sencha Touch</h2> 
</div> 
</div> 
</div> 
</div> 
</div> 


><div class="x-container x-tabbar-dark x-tabbar x-dock-item x- 
docked-bottom x-stretched" id-"ext-tabbar-1"»..«/div» 
</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


图 13.7 Sencha Touch 生成 的 DOM 树 


接 下 来 我 们 对 程序 做 一 些 修改 , 添加 一 个 blog 阅读 界面 ， 首 先 将 全 部 代码 删 掉 ， 用 下 
面 的 代码 替换 : 


Ext.application(( 
name: 'Demo', 


launch: function() ( 
Ext.create("Ext.tab.Panel", ( 
fullscreen: true, 
tabBarPosition: 'bottom', 


items: [ 
t 
xtype: 'nestedlist', 
title: “Blog? 
iconCls: 'star', 
displayField: 'title', 


store: ( 
type: 'tree', 


fields: [ 


Sh STINE 'author', 'contentSnippet', 
"content', 
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(name: 'leaf', defaultValue: true] 


l; 


root: 1 
leaf: false 
), 


proxy: { 
type: 'jsonp', 
uers 
'https://ajax.googleapis.com/ajax/services/feed/load?v-1.0&q-http://fee 
ds.feedburner.com/SenchaBlog', 
reader: ( 
type: 'json', 
rootProperty: 'responseData.feed.entries' 


在 之 前 的 代码 中 ， 我 们 在 panel 里 面 放置 的 是 一 些 原始 的 HIML。 而 上 面 的 代码 中 我 
们 在 panel 中 放置 的 是 Nested List 组 件 (用 xtype 定义 )， 同 样 可 以 同 用 title, iconCls 等 对 
Nested List 进行 配置 ，store 选项 指明 了 Nested List 组 件 获取 数据 的 方式 ，store 选项 的 具体 


AS EL 


HHE: 
口 type:tree - 树 状 的 数据 类 型 ，NestedList 会 使 用 到 。 
口 fields - 告知 Store 组 件 我 们 需要 用 到 哪些 字段 。 
口 proxy - 从 哪儿 取 数 据 。 
O root - leaf:false 设置 根 节点 不 是 一 个 叶 节 点 一 一 意思 是 数据 的 根 节点 不 应 该 被 展 


示 出 来 ， 因 为 我 们 之 前 设置 叶 (leaf) 节点 的 默认 值 (defaultValue) 为 true. 
proxy 定义 可 能 是 store 定义 最 重要 的 部 分 了 ， 它 指明 了 获取 数据 的 地 址 (google feed 
api)、 数 据 的 格式 〈JSON-P) 和 一 个 reader 定义 。 
最 后 一 部 分 的 Reader 实体 用 于 读 取 远 端 返回 的 数据 ， 在 本 例 中 以 JSON 方式 读 取 
Google 服务 器 返回 的 信息 ，Google 返回 的 JSON 结果 类 似 于 下 面 的 结构 : 


{ 
responseData: { 
feed: { 
entries: [ 
{author: 'Bob', title: 'Great Post', content: 'Really good 
content...'] 
] 
} 
} 
$ 


rootProperty 则 定义 了 最 终 用 到 的 对 象 是 entries 数组 , 剩 下 的 就 交 给 框架 泻 染 最 终结 果 
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了 ， 如 图 13.8 所 示 。 


iOS 183338 — iPhone Retina (3.5-inch) / iOS 7.0 (11A465) 
Carrier 10:09 PM -— 


localhost 


Blog 


Top 5Tips 一 Get Started with the 
Latest Sencha Product Releases 


Get Certified as a Sencha Touch or 
Ext JS Developer! 


Announcing Sencha Touch 2.3 - 
Touch Grid, Cordova Support, and 


New Themes 
SenchaCon 2013 Session 
< ET ET TER 


图 13.8 Blog 界面 


此 时 我 们 的 博客 列表 已 经 有 了 ， 可 是 轻 触 列表 还 没有 什么 实质 的 效果 ， 要 实现 点 触 后 
进入 博客 阅读 界面 这 一 功能 也 非常 简单 


xtype: 'nestedlist', 


detailCard: ( 
xtype: 'panel', 
scrollable: true, 
styleHtmlContent: true 
), 


listeners: ( 
itemtap: function(nestedList, list, index, element, post) ( 
this.getDetailCard().setHtml (post.get('content')); 
} 


以 上 两 块 儿 配 置 中 ， 我 们 创建 了 一 个 detailCard， 它 允许 你 在 轻 触 Nested. List 的 时 候 
显示 一 个 新 的 view， 并 在 itemtap 事件 触发 时 将 view 中 内 容 设置 为 博客 内 容 ， 如 图 13.9 
所 示 。 


"Gs 


3€ Sencha Touch 


接 下 来 我 们 看 看 如 何 创建 一 个 表单 : 


Ext.application(( 


Beg Top 5 Tips — Get St... 


— Get Started with the 
ha Product Releases 


ed as a Sencha Touch or 


‘eloper! release, or h 
GTA 5, Sen 
g Sencha Touch 2.3 - moai 
1, Cordova Support, and mou 
ies Architect 2. 
n 2013 Session To celebrat: 
s Now Available! best tricks t 
also attend 
products, y. 
practices frc 
We'll start o 
to one we tt 
图 13.9 带 返回 按钮 的 博客 阅读 界面 


name: "Sencha' 


launch: function() ( 
Ext.create("Ext.tab.Panel", ( 


fullscreen: 
tabBarPosition: 


items: 


{ 


[ 


title: 


iconCls: 


true, 


"bottom', 


'Contact', 


'user', 


//£ormpanel 是 一 个 独立 的 组 件 
'formpanel', 
url: 'contact.php', 
//1ayout 指定 界面 布局 


tpoz; 


xtype: 


layout: 


items: 


{ 


[ 


// 表 单 集合 


xtype: 
title: 


instructions: 


'fieldset', 
'Contact Us', 


height: 285, 


items: 


i 


[ 


//textfield 相当 于 input:text 
xtype: 'textfield', 
label: 'Name' 


//textfield 相当 于 input:email 
xtype: 'emailfield', 
label: 'Email"' 


'(email address is optional)', 


s: 353g.s 
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}, 

{ 
//textareafield 相当 于 textarea 
xtype: 'textareafield', 
label: 'Message' 


xtype: 'button', 

text: 'Send', 

ui: 'confirm', 

//handler 会 在 轻 触 按钮 时 触发 ， 表 单 会 提交 到 contact.php 

handler: function() ( 
this.up('formpanel').submit(); 

l 


创建 表单 的 方式 也 和 其 他 组 件 的 方式 大 同 小 异 ， 最 后 效果 如 图 13.10 所 示 。 


Contact Us 

Name 

Email filod33@gmail.com 
Message 


(email address is optional) 


图 13.10 Sencha Touch 表单 
至 此 ， 三 个 页 面 均 已 完成 ， 不 过 作为 一 个 完整 应 用 ， 这 三 个 部 分 怎 能 分 割 ， 让 我 们 把 
他 们 合 起 来 : 


Ext.application((í 
name: 'Sencha', 
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最 后 效果 (三 个 Tab 可 以 无 刷 自 由 切换 》 如 图 13.11 所 示 。 


Contact Us 


Name 
Email 


Message 


(email address is optional) 


Contact 


图 13.11 353 ^ Tab 的 应 用 


134 st Br 


Sencha Touch 的 内 容 远 不 止 上 面 这 个 小 实例 那么 简单 ， 它 至 少 还 包括 以 下 内 容 。 

口 MVC: 从 默认 APP 的 目录 结构 就 能 看 出 Sencha Touch 是 内 建 了 完整 的 MVC 系统 
的 ， 构 建 大 型 客户 端 应 用 MV* 的 程序 结构 几乎 是 必 不 可 少 的 ， 将 数据 与 表现 分 离 
是 每 一 个 优秀 程序 员 应 尽 的 责任 与 义务 。 

口 设备 配置 (Device Profiles) : Sencha Touch 中 你 可 以 为 不 同 设备 启用 不 同 的 配置 ， 
这 使 得 你 可 以 为 手机 或 平板 提供 差异 化 体验 的 同时 共享 尽 可 能 多 的 业务 逻辑 代码 
和 资源 。 

O 历史 记录 : 作为 单 页 应 用 框架 ,完备 的 历史 记录 和 路 由 功能 是 必 不 可 少 的 ，Sencha 
Touch 提供 了 一 套 Restful 的 URL routing 系统 , 甚至 你 可 以 在 界面 导航 时 恢复 程序 
的 状态 《〈 比 如 单 击 返回 后 正确 定位 之 前 面板 的 位 置 ) 。 

口 PhoneGap/Cordova 集成 : Sencha Touch 对 PhoneGap/Cordova 非常 友好 ， 友 好 到 什 
么 程度 呢 ? Sencha Touch 的 官方 有 专门 PhoneGap/Cordova 集成 教程 ，Sencha Cmd 
工具 也 提供 了 相应 的 命令 来 生成 程序 。 

口 组 件 ， 前 面 例子 已 经 展示 了 一 部 分 组 件 的 使 用 模式 和 API 惯例 ，Sencha Touch 拥 
有 一 颗 庞 大 的 组 件 树 ， 包 括 Form, DataView, Carousel, Chart, List, TabPanel 
和 NestedList 等 等 。 


«3615 


第 2 篇 HIML 5 移动 Web 开发 实战 


口 布局 系统 : Sencha Touch 中 有 一 个 非常 强大 的 布局 引擎 ， 利 用 它 你 可 以 控制 组 件 
的 大 小 和 位 置 ， 以 期 在 不 同 屏幕 上 都 能 非常 好 的 显示 效果 。 
口 主题 系统 : 和 jQueryMobile 类 似 ，Sencha Touch 的 视觉 效果 也 可 以 很 容易 的 定制 ， 
而 且 Sencha Touch 还 支持 SASS 预 处 理 器 。 
口 Grid 系统 : 是 的 ，Sencha Touch 甚至 有 自己 的 Grid 系统 ， 所 以 也 不 用 怕 表 格 数 
据 了 。 
Sencha Touch 的 内 容 十 分 庞杂 ， 限 于 篇 幅 ， 本 书 不 再 过 多 讲解 Sencha Touch 的 内 容 ， 
读者 有 需要 可 以 阅读 官方 的 文档 (http://docs.sencha.com/touch/2.3.0/) 或 者 购买 相关 书籍 进 
行 学 习 。 
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“Bootstrap 是 世界 上 最 受 欢迎 的 Web UI 项 目 ， 没 有 之 一 。” filod 

这 并 不 是 我 在 里 说 ， 截 止 到 2013 年 10 月 22 H 9 点 17 分 ，Bootstrap 在 Github 上 的 
star 数目 已 达 59820， 这 超过 了 位 居 第 二 的 node.js 项 目 一 倍 还 要 多 (node.js 的 star 数 是 
25189)。 市 面 上 你 所 能 看 到 的 网 站 有 许多 是 由 Bootstrap 作为 前 端 构 建 的 。 

Bootstrap 最 初 由 twitter 开源 ， 现 在 已 经 变 成 了 一 个 独立 组 织 twbs (twitter bootstrap) 
下 的 主要 项 目 ， 它 提供 了 一 套 基础 样式 、 一 套 布局 系统 、 一 套 UI 组 件 和 一 套 附加 的 
JavaScript 交互 组 件 ， 它 的 UI 优雅 简洁 ， 基 础 功能 完善 ， 使 用 极其 简单 ， 易 于 扩展 和 自 定 
义 ， 很 快 成 为 快速 搭建 网 站 的 首选 。 加 上 它 附加 的 响应 式 设计 框架 ，Bootstrap 也 成 为 很 多 
移动 项 目 或 者 需要 同时 兼容 移动 设备 和 桌面 项 目的 不 二 之 选 。 

而 且 Bootstrap 从 3.0 版 本 后 开始 遵循 mobile first 理念 , 从 一 套 桌面 框架 摇身一变 成 了 
移动 框架 ， 因 此 本 书 自然 无 法 忽视 它 。 


14.1 Bootstrap3 综述 


按照 官方 的 说 法 ，Bootstrap 2 是 一 个 “流畅 的 、 直 觉 式 的 、 强 大 的 、 让 Web 开发 更 加 
快速 和 简单 的 前 端 框架 ”(Sleek, intuitive, and powerful front-end framework for faster and 
easier web development)。 而 Bootstrap 3 对 Bootstrap 2 进行 了 大 刀 阔 什 的 改造 , 标语 也 做 了 
细微 却 又 重要 的 改变 :“ 流 畅 的 、 直 觉 式 的 、 强 大 的 、 让 Web 开发 更 加 快速 和 简单 的 移动 
优先 的 前 端 框 架 *(Sleek, intuitive, and powerful mobile first front-end framework for faster and 
easier web development). 
虽然 看 起 来 只 多 了 小 小 的 两 个 词 , 但 实际 上 Bootstrap 整个 项 目 都 完全 重 写 了 一 次 , 与 
Bootstrap 2 相 比 ， 至 少 包 含 如 下 更 新 内 容 。 


1. 全 新 设计 


简单 地 说 ，Bootstrap 3 的 设计 更 加 扁平 化 ， 如 图 14.1 所 示 。 

不 过 Bootstrap 团队 成 员 说 Bootstrap 3 采用 扁平 化 设计 不 是 因 设 计 界 的 趋势 所 致 ， 而 
只 是 为 了 定制 化 〈customization) 更 加 方便 一 一 因为 简单 的 设计 意味 着 可 定制 的 程度 更 高 ， 
并 且 Bootstrap 团队 也 提供 了 一 个 可 选 主题 ， 该 主题 和 Bootstrap 2 默认 主题 差别 不 大 ， 如 
图 14.2 所 示 。 


2. 移动 优先 
这 可 能 是 最 大 的 改变 了 ， 在 Bootstrap 2 时 代 ， 要 使 你 的 网 站 兼容 移动 设备 ， 需 要 引入 
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一 个 独立 的 文件 : bootstrap-responsive.css， 这 个 文件 的 主要 作用 是 在 屏幕 宽度 缩小 时 将 页 
面 上 的 Grid 的 系统 变 为 堆 县 状态 。 而 Bootstrap 3 的 啊 应 式 设计 思路 完全 不 一 样 ， 从 一 开始 
就 在 屏幕 较 小 的 移动 设备 上 构建 ， 然 后 再 兼容 屏幕 较 宽 的 设备 (典型 的 移动 优先 思路 )， 整 
个 框架 始终 都 能 保持 高 度 “ 响 应 ”。 


Action 


Another action 
Something eise her 


Hello, worl. 


This is a template for a simple ms One more separated i, WebSite. It includes a large callout called 
the hero unit and three supporting preses uruurner; use it as a starting point to create something 


more unique. 


Leam more 


Heading 
Donec id elt non mi porta gravida at eget metus. Fusce dapibus, tetus ac cursus commodo. tortor mauris condimentum ribh, ut fermentum massa. 
Justo st amet risus. Etiam pora sem maiesuaca magna molis eusmod. Donec sec odio d. 


图 14.1 更 加 扁平 Cat) 的 Bootstrap 


Home Dropdown - 


Acton 
Another acton 
Something eise here 


Hello, worly-——— 


This is a template for a simple mal_or moe Paata | website, It 


and three supporting pieces of content. Use it as a starting point to « 


Leam more » 


Buttons 


— EE CI EI EE - 


图 14.2 可 选 主题 


3. 全 新 定制 器 


新 的 定制 器 (customizer) 完全 基于 浏览 器 进行 编译 ， 不 再 依赖 后 端 〈 过 去 程序 ien 
Heroku). 而 且 有 了 更 好 的 依赖 支持 和 内 置 的 错误 处 理 , 同时 还 附 赠 一 个 贴心 的 小 功能 , H 
你 自 定义 的 文件 创建 一 个 匿名 gist， 以 方便 重用 、 分 享 和 修改 ， 如 图 14.3 所 示 。 
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Customize and download 


| 
LESS files — 11 1 0 ww 


Choose which LESS files to compie into your custom build of Bootstrap. Not sure which fles 
to use? Read through the CSS and Components pages in the docs 


Common CSS Components JavaScript components. 
ore aye 2 aymara © orpaowrs 
d M bus gouos S Toons 
PEN "d E Popovers 
M Ord syst pe M Moceis 
"uL Mavar M Carounei 
PM rarus 
Pr Pagraton Utilities 
S rer M asc vanes 
M aces M Resconsiee um 
"— M Component anmators f aS 
M jurtcton 
M Trtrais 


图 14.3 定制 器 


4. 更 改 默认 盒 模型 


几乎 所 有 的 浏览 器 的 默认 盒 模型 都 是 content-box， 但 是 并 不 意味 着 这 是 更 优 的 ， 我 们 
都 知道 content-box 模型 来 源 于 W3C 最 初 的 盒 模 型 ， 但 实际 上 对 于 程序 员 来 讲 ，border-box 
是 更 方便 的 一 种 模型 , 你 只 需 关 注 盒子 最 终 的 尺寸 大 小 , 而 不 用 每 次 都 重新 计算 。Bootstrap 
3 默认 将 块 级 元 素 重 置 为 了 border-box: 


Si 


*:before, 
*:after { 
-box-sizing (border-box) ; 


} 
这 样 你 在 使 用 padding 时 心里 负担 会 降低 许多 ， 而 且 能 让 Grid 系统 变 得 更 好 用 。 
5. 强大 的 Grid 系统 


现在 的 grid class 支持 四 层 (tier) 设备 : 手机、 平板 、 桌 面 和 大 屏 桌 面 ， 你 可 以 利用 
grid 做 出 很 多 有 趣 的 布局 ， 而 且 还 能 支持 多 种 设备 。 


6. 重 写 JavaScript 插件 
所 有 插件 的 事件 现在 都 加 上 了 命名 空间 ， 以 避免 和 其 他 框架 冲突 。 
7T. 新 字体 icon 


在 Bootstrap 2 中 所 有 图 标 都 是 基于 图 片 的， 图 片 有 很 多 缺点 ,例如 难以 修改 颜色 对 多 
设备 支持 不 好 等 等 ， 而 现在 所 有 的 图 标 都 使 用 字体 格式 来 实现 ， 但 是 调用 方式 和 原来 也 基 
本 一 样 〈 只 不 过 要 加 上 图 标的 版 权 方 ): 


<span class="glyphicon glyphicon-pencil"»«/span» 


而 且 增加 了 40 多 个 新 图 标 。 


ways 
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8. Navbar 重 写 


Navbar 是 Bootstrap 中 使 用 率 非 常 高 的 组 件 , Bootstrap 3 对 它 进行 了 大 修 , 现在 Navbar 
能 始终 保持 响应 ， 而 且 Navbar 中 的 子 组 件 能 方便 地 进行 重 排列 。 


9. 响应 式 的 Modal 


是 的 , 现在 对 话 框 也 是 可 响应 的 了 。 对 于 内 容量 较 多 的 对 话 框 会 随 着 页 面 进 行 滚动 (以 
前 是 设置 了 max-height). 


10. 新 组 件 
panels 和 list groups 是 Bootstrap 3 新 增 的 组 件 。 
11. 被 移 除 的 组 件 


有 出 新 自然 也 有 推 陈 ，accordion 被 collapsible panels 所 替代 ，submenus 和 typeahead 
等 组 件 则 被 移 除 掉 。 


12. 基础 class 一 致 性 更 好 


Buttons, tables, forms 和 alerts 等 都 采用 具有 高 度 一 致 性 的 class 来 控制 其 样式 或 尺寸 ， 
这 样 将 获得 更 好 的 可 定制 性 和 扩展 性 。 

13. 更 完善 的 文档 

现在 的 文档 中 除了 组 件 说 明 ， 还 增加 了 浏览 器 兼容 说 明 、 许 可 证 FAQ、 第 三 方 支持 和 
可 访问 性 Caccessibility) 等 内 容 。 

14. 不 再 支持 IE 7 和 Firefox 3.6 及 更 低 版 本 

IE 8 依然 是 支持 的 ,但 如 果 你 要 在 正 8 中 使 用 CSS 3 media queries, 可 以 使 用 Respond.js 
Chttps://github.com/scottjehl/Respond ) . 

因为 Bootstrap 2 着 实 太 红 ， 笔 者 再 从 零 讲 起 的 话 确 有 炒 冷 饭 之 嫌 ， 所 以 接 下 来 的 章节 
将 主要 针对 Bootstrap 3 新 增 和 改变 的 部 分 进行 讲解 。 


14.2 Grid 系统 


Bootstrap 包含 一 个 可 响应 、 移 动 优 先 的 流 式 (fluid) 栅 格 系统 ， 随 着 视 口 /设备 宽度 的 
增加 会 扩展 为 12 列 。 它 包含 一 些 预 定义 的 class 用 于 布局 , 同时 还 提供 了 强大 的 mixin class 
用 于 生成 更 多 的 布局 (需要 了 解 LESS). 

Bootstrap 的 断 点 定义 是 从 小 到 大 的 (也 是 为 了 遵循 移动 优先 原则 )， 基 本 思路 是 : 

/* 超 小 屏幕 设备 (手机 ， 最 大 480px) */ 


/* No media query since this is the default in Bootstrap */ 


/* 小 屏幕 设备 (平板 ，768px 以 上 ) */ 


@media (min-width: @screen-sm) { ... } 
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/* 中 等 设备 (桌面 电脑 ，992px AE) */ 


Gmedia (min-width: Gscreen-md) { ... } 


/* 大 屏 设 备 (大 桌面 ，1200px ELE) */ 


Gmedia (min-width: G8screen-lg) ( ... ) 


Bootstrap 的 Grid 系统 就 基于 上 面 的 Media queries 构建 。 在 所 有 情况 下 ，Bootstrap 的 
网 格 系统 都 是 12 列 , 但 却 提供 了 四 种 类 型 的 列 定义 class, 分 别 是 .col-xs-*、.col-sm-*、.col-md-* 


和 .col-lg-*， 它 们 在 不 同 屏幕 宽度 下 有 着 不 同 的 行为 ， 


表 14-1 Bootstrap Grid 系 统 


手机 


平板 


具体 参考 表 14-1。 


(Medium) (>992px) 


(Large) (>1200px) 


屏幕 宽度 (Extra smal) | (si tl) (2768px) 
(<768px) 
Grid 行为 均 水 平 排列 


当 大 于 断 点 时 便 水 平 排列 ， 否 则 垂直 堆 营 


最 大 容器 宽度 None (auto) 750px 


对 应 Class 前 级 | .col-xs- .col-sm- 
总 的 列 数 12 

最 大 列 宽度 Anuto 60px 
列 间 宽 度 30px〔 列 两 边 各 15px) 
DEDI SS 可 以 

Offsets N/A Yes 
Column ordering | N/A. Yes 


看 到 这 个 表格 你 可 能 会 有 些 迷 茫 , 为 什么 会 用 到 四 种 class 来 表示 列 ? 让 我 们 用 实例 来 


说 明 。 


最 基本 的 用 法 和 之 前 的 span* 一 样 ， 用 数字 表示 占用 多 少 列 : 


<div class="row"> 


<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 
<div col-md-1">.col-md-1</div> 


<div col-md-1">.col-md-1</div> 
</div> 
<div class="row"> 
<div class-"col-md-8"».col-md-8«/div» 
<div class="col-md-4">.col-md-4</div> 
</div> 
<div class="row"> 
<div class-"col-md-4"».col-md-4«/div» 
<div class="col-md-4">.col-md-4</div> 
<div class="col-md-4">.col-md-4</div> 
</div> 
<div class="row"> 
<div class="col-md-6">.col-md-6</div> 
<div class="col-md-6">.col-md-6</div> 


"Ts 
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«/div» 


在 较 宽屏 幕 ( 宇 992px) 下 的 显示 效果 ， 如 图 14.4 所 示 。 


.col- .col- .col- .col- .col- col- .col- .cok .col- .col- .col- .col- 
md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 md-1 
:Col-md-8 -cohmd-4 

.Col-md-4 .col-md-4 -Cohmd-4 

.col-md-6 .col-md-6 


图 144 col-md-* (1000px) 


AFE: grid 的 单元 格 本 身 是 没有 任何 样式 的 ， 图 14.4 中 加 样式 是 为 了 更 直观 地 说 明 grid 
的 行为 。 
当 你 的 屏幕 宽度 (<992px) 较 小 时 ， 所 有 .col-md-* 的 容器 都 会 堆 共 起 来 ， 如 图 14.5 
所 示 。 


-col-md-1 
.colmd-1 
.colmd-1 
.col-md-1 
.colmd-t 
.colmd-t 
.col-md-1 
.col-md-1 
-col-md-1 
.colmd-1 
.col-md-1 


.col-md-1 


.Col-md-8 


.Col-md-4 


.cormd-4 


.Col-md-4 


图 14.5 col-md-* (800px) 


.col-sm-*. .col-md-*£il.col-Ig -* 三 种 class 都 会 在 小 于 各 自 相 应 的 断 点 的 时 候 切 换 成 垂 
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EA. 
-colL-xs-*# 则 无 论 如 何 都 不 会 堆 登 ， 如 图 14.6 所 示 。 


:Col: .col: .col- .col- .col: .col- .col- .col: .col .col: .col .col 
XS-| XS-| XS-| XS-| X9-| X9-| X9-| XS-| X9-| X9-| XS-| xS- 
1 1 1 1 1 1 1 1 1 1 1 1 


图 14.6 col-xs-* (500px) 


看 到 这 里 你 应 该 已 经 基本 清楚 了 新 的 Grid 系统 怎么 用 了 ， 来 看 一 个 复杂 一 点 的 例子 : 
<!-- 在 移动 设备 (<992px) 中 .col-xs-* 会 主导 样式 ， 第 一 个 div 会 占据 整 行 ， 第 二 个 div 占 


LA Is 
<div class="row"> 
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 


<!-- 移动 设备 中 每 一 个 div 宽度 为 50$， 而 桌面 端 变 成 33.3% --> 

<div class="row"> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div clas col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 

</div> 


<!-- 均 保 持 50% 宽 --> 
<div class="row"> 
<div class="col-xs-6">.col-xs-6</div> 
<div class="col-xs-6">.col-xs-6</div> 
</div> 


图 14.7 是 在 屏幕 宽度 为 1000px 时 的 效果 。 


Col-xs-12 col-md-8 .Col-Xs-6 .coi-md-4 
,Col-XS-6 .col-md-4 .Col-Xs-6 .coi-md-4 -Col-XS-6 .col-md-4 
.Col-XS-6 .Cohxs-6 


图 14.7 混合 .col-xs-* 和 .col-md-* (1000px) 
图 14.8 是 800px 时 的 效果 。 


:Col-xs-12 col-md-8 


:COl-xs-6 .col-md-4 


-Col-xs-6 .col-md-4 .Col-xs-6 .col-md-4 


:Col-xs-6 .col-md-4 
.Col-xs-6 .Col-xs-6 
图 14.8 混合 .col-xs-* 和 .col-md-* (800px) 
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甚至 我 们 可 以 混合 手机 (mobile), Fik Cable 和 桌面 (desktop) 三 种 情况 : 


<div class="row"> 
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 . 
col-md-8</div> 
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 . 
col-md-4</div> 

</div> 

<div class="row show-grid"> 
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 . 
col-md-4</div> 
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 . 
col-md-4</div> 
<div class="clearfix visible-xs"></div> 
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 . 
col-md-4</div> 

</div> 


下 面 是 在 三 种 尺寸 屏幕 的 显示 效果 如 图 14.9, K 14.10 和 图 14.11 所 示 。 


‘Col-xs-12 .col-sm-6 .col-md-8 Col-xs-6 .col-sm-6 .col-md-4 


,Col-xs-6 .col-sm-4 .col-md-4 Col-xs-6 .col-sm-4 .col-md-4 Col-xs-6 .col-sm-4 .coi-md-4 


图 14.9 三 种 混合 (1000px) 


,Col-XS-12 .col-sm-6 .col-md-8 .col-xs-6 .col-sm-6 .col-md-4 


.Col-XS-6 .col-sm-4 .col-md-4 .COl-xs-6 .col-sm-4 .col-md-4 .COl-xs-6 .col-sm-4 .col-md-4 


图 14.10 三 种 混合 (800px) 


:Col-xs-12 .col-sm-6 .col-md-8 


.col-xs-6 .col-sm-6 .col-md-4 


.col-xs-6 .col-sm-4 .col-md-4 -Col-xs-6 .col-sm-4 .col-md-4 


.col-xs-6 .col-sm-4 .col-md-4 


图 14.11 三 种 混合 (500px) 


要 注意 上 面 的 例子 中 有 一 行 是 <div class-"clearfix visible-xs"></div>， 这 一 行 的 作用 在 
于 ， 因 水 平 排列 布局 由 浮动 实现 ， 而 .col-xs-* 会 始终 浮动 ， 因 此 我 们 需要 在 较 罕 屏幕 且 多 
列 并 排 时 , 某 一 列 其 内 容 高 度 高 于 其 他 列 时 清除 该 行 的 浮动 , 否则 会 影响 后 面 的 列 的 排 布 。 
和 Bootstrap 2 类 似 ，Bootstrap 3 中 依然 可 以 对 列 进行 偏 移 (offset): 


<div class="row"> 
<div class="col-md-4">.col-md-4</div> 
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<div class-"col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
</div> 
<div class="row"> 

<div class-"col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3«/div» 

<div class-"col-md-3 col-md-offset-3"».col-md-3 .col-md-offset-3«/div» 
«/div» 
<div class="row"> 

<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
</div> 


效果 如 图 14.12 所 示 。 


.col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 


.Col-md-6 .coi-md-offset-3 


图 14.12 列 偏 移 


如 果 你 使 用 多 个 列 模式 时 同时 使 用 了 偏 移 ， 那 么 记得 重 置 偏 移 : 


<div class="row"> 

<div class="col-sm-5 col-md-6">col</div> 

<div class-"col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">col</div> 
«/div» 


<div class="row"> 
<div clas col-sm-6 col-md-5 col-lg-6"»col«/div» 
<div class-"col-sm-6 col-md-5 col-md-offset-2 col-1g-6 col-lg-offset-0"» 
col«/div» 

«/div» 


另外 ， 每 一 个 列 中 都 可 以 继续 嵌 套 grid， 列 中 顽 套 行 需要 重新 从 12 开始 计算 列 数 : 


<div class="row"> 
<div class="col-md-9"> 
Level 1: .col-md-9 
<div class="row"> 
<div class="col-md-6"> 
Level 2: .col-md-6 
</div> 
<div class-"col-md-6"» 
Level 2: .col-md-6 
</div> 
</div> 
</div> 
</div> 


效果 如 图 14.13 所 示 。 


Level 1: .col-md-9 


Level 2: .col-md-6 Level 2: .col-md-6 


图 14.13 tf grid 
Grid 系统 还 有 一 个 非常 有 意思 的 特性 是 可 以 通过 .col-md-push-* 和 .col-md-pull-* 来 改变 
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列 的 顺序 : 
<div class="row"> 
«1-- 第 一 个 div 往 后 推 (push) 3 格 ， 第 二 个 div 往 前 拉 (pull) 9 格 --> 
<div class-"col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
<div class-"col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
</div> 


效果 如 图 14.14 所 示 。 


.Col-md-3 .col-md-pull-9 -col-md-9 .col-md-push-3 


图 14.14 改变 列 顺序 


Bootstrap 新 的 Grid 系统 十 分 强大 , 你 几乎 不 用 写 一 行 样式 代码 就 可 以 构建 出 各 种 曼妙 
布局 。 


143 ”响应 式 实 用 类 


为 了 更 快速 地 开发 移动 设备 友好 的 Web FEY, Bootstrap 提供 了 一 组 实用 类 , 用 于 在 不 
同 屏幕 宽度 的 情况 下 隐藏 /显示 元 素 ， 比 如 .visible-xs 的 含义 是 在 屏幕 宽度 小 于 768 时 隐藏 
使 用 了 该 类 的 元 素 ， 完 整 的 类 名 见 表 14-2。 
表 14-2 ”响应 式 实用 类 


Extra small (<768px) Small (2768px) Medium (2992px) Large (21200px) 


visible-xs Hidden Hidden 
visible-sm Hidden Hidden 


visible-md Visible Hidden 
visible-lg Hidden Visible 
hidden-xs Visible Visible 
.hidden-sm Visible Hidden Visible Visible 
.hidden-md Visible Visible Hidden Visible 
hidden-lg Visible Hidden 
Bootstrap 还 附 赠 了 两 个 用 于 隐藏 /显示 打印 内 容 的 样式 : .visible-print 和 .hidden-print， 
其 用 法 和 上 面 的 类 一 样 。 


14.4 组 件 更 新 一 -Navbar 


Bootstrap 3 几乎 全 部 组 件 都 进行 了 更 新 ， 不 过 我 们 只 捡 重 要 的 说 。 

Navbar 或 许 是 bootstrap 中 使 用 率 最 高 的 组 件 了 ， 新 版 的 Navbar 精简 了 标签 ， 并 且 从 
一 开始 就 支持 折 县 (原来 必须 要 引入 bootstrap-responsive.css)， 先 来 看 一 个 完整 的 navbar 
示例 : 
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<nav class-"navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class-"navbar-toggle" data-toggle-"collapse" 
data-target-".navbar-exl-collapse"^ 
«!'— sr-only 用 于 提升 可 访问 性 (accessibility) ， 它 的 含义 是 screen reader 
only【〔 仅 提供 给 屏幕 阅读 器 使 用 ) --> 
<span clas sr-only"»Toggle navigation</span> 
<span clas icon-bar"»«/span» 
<span class-"icon-bar"»«/span» 
<span class-"icon-bar"»«/span» 
X/button» 
<a class-"navbar-brand" href="#">Brand</a> 
«/div» 


<!-- dX UE TEB SI UL PRAE --> 
<div class-"collapse navbar-collapse navbar-exl-collapse"» 
«ul class="nav navbar-nav"» 
<li class-"active"»«a href-"£"»Link«/a»«/li» 
<li><a href-"4"»Link«/a»«/li» 
<li class-"dropdown"» 
<a href="#" class-"dropdown-toggle" data-toggle-"dropdown"» 
Dropdown <b class-"caret"»5«/b»«/a» 
<ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li><a href="#">Separated link</a></li> 
<li><a href="#">One more separated link</a></li> 
</ul> 
«/li» 
</ul> 
<form class="navbar-form navbar-left" role="search"> 
<div class="form-group"> 
<input type="text" class="form-control" placeholder="Search"> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 
</form> 
<ul class="nav navbar-nav navbar-right"> 
<li><a href="#">Link</a></1i> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Dropdown <b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
«/1li» 
«/ul» 
</div> 
</nav> 


Navbar 现在 可 以 使 用 HTML 5 的 nav 元 素 了 ， 需 要 注意 的 是 dropdown 菜单 是 需要 
collapse plugin 支持 的 ， 必 须要 引入 相应 的 JavaScript (包括 Bootstrap 插件 依赖 的 jQuery) 。 
效果 如 图 14.15 和 图 14.16 所 示 。 
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Brand Lnk Lk Dropdwn- search 


Submit Link Dropdown ~ 


Action 


Another action. 


Something else hero 


Separated ink 
One more separated ink 


图 14.15 Navbar 


Brand 


Dropdown ~ 
Action 
Arofhar action 
Something eise nere 


Separated link 


图 14.16 Navbar (<768px) 


可 以 从 上 例 看 到 ，Navbar 变 得 丰富 了 许多 ， 例 如 可 以 添加 fom, 或 者 单独 的 按钮 ( 需 
要 加 navbar-btn class): 


«nav class-"navbar navbar-default" role-"navigation"» 
<div class-"navbar-header"» 
<button type="button" class-"navbar-toggle" 
data-target-".navbar-ex2-collapse"» 
<span class-"sr-only"»Toggle navigationc/span» 
<span clas icon-bar"»«/span» 
<span clas icon-bar"»«/span» 
<span class-"icon-bar"»«/span» 
X/button» 
<a class-"navbar-brand" href="#">Brand</a> 
</div> 
<div class="collapse navbar-collapse navbar-ex2-collapse"> 


<button type="button" class="btn btn-default navbar-btn">Sign 
in</button> 


</div> 
</nav> 


data-toggle="collapse" 


效果 如 图 14.17 和 图 14.18 所 示 。 


Brand Signin 


图 14.17 带 按钮 的 Navbar 


Brana E] 


Sign n 


1418 ” 带 按钮 的 Navbar (<768px) 
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使 用 .navbar-text 可 以 为 网 站 增加 一 名 导语 标语 之 类 的 东西 (通常 是 p 元 素 ): 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-ex3-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#">Brand</a> 
</div> 
<div class="collapse navbar-collapse navbar-ex3-collapse"> 
<p class="navbar-text">Signed in as Mark Otto</p> 
</div> 
</nav> 


效果 如 图 14.19 所 示 。 


Brand Signed in as Mark Otto 


图 14.19 ” 带 标语 的 Navbar 


Navbar 依然 支持 固定 在 屏幕 项 部， 使 用 .navbar-fixed-top 即 可 : 


«nav class-"navbar navbar-default navbar-fixed-top" role="navigation"> 


Bootstrap 中 甚至 可 以 将 Navbar 固定 在 底部 : 


«nav class-"navbar navbar-default navbar-fixed-bottom" role-"navigation"» 


«/nav» 


最 终 这 两 条 在 iPhone 中 的 效果 可 能 是 这 样 ， 如 图 14.20 所 示 。 


OS 83338 - iphone Retina G.5 inch / 05 7.011465) 


Camer 全 2:01PM - 

localhost [4 

Brand 

Brand 

Home 

Link 

Link 

$ & mq gm 


图 14.20 固定 位 置 的 Navbar 
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Bootstrap 还 支持 贴 于 页 面 顶部 的 navbar 〈 随 页 面 滚 动 而 滚动 )， 使 用 .navbar-static-top 


即 可 : 


«nav class-"navbar navbar-default navbar-fixed-bottom" role-"navigation"» 


高 对 比 色 〈 也 就 是 黑色 啦 ) 的 Navbar fii H].navbar-inverse: 


«nav class-"navbar navbar-inverse" role="navigation"> 


«/nav» 


效果 如 图 14.21 所 示 。 


图 14.21 .navbar-inverse 


14.5 组 件 更 新 一 -List group 


List group 是 Bootstrap 3 中 新 增 的 组 件 ， 基 本 的 List group 本 质 上 就 是 一 个 列表 : 


<ul class-"list-group"^ 
<li class-"list-group-item"»Cras justo odio«/li» 
<li class-"list-group-item"»Dapibus ac facilisis in«/li» 
<li class-"list-group-item"»Morbi leo risus«c/li» 
<li class-"list-group-item"»Porta ac consectetur ac«/li» 
<li class-"list-group-item"»Vestibulum at erosc/li» 
«/ul» 


效果 如 图 14.22 所 示 。 


Cras justo odio 

Dapibus ac facilisis in 
Morbi leo risus 

Porta ac consectetur ac 


Vestibulum at eros 


图 14.22 List group 


这 和 普通 的 导航 列表 没有 太 大 区 别 ， 只 是 加 了 边框 ， 如 果 我 们 将 badge 放 入 List group 


"P, badge 会 自动 球 到 右边 去 : 


«ul class-"list-group"» 
<li class-"list-group-item"» 
<span class-"badge"»14«/span» 
Cras justo odio 
«/1li» 
«/ul» 
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效果 如 图 14.23 所 示 。 
List group 不 要 求 标签 一 定 是 列表 ， 也 可 以 是 链接 : 


<div class-"list-group"» 

<a href="#" class-"list-group-item active"^ 

Cras justo odio 

</a> 

<a href="#" class="list-group-item">Dapibus ac facilisis in</a> 

<a href="#" class-"list-group-item"»Morbi leo risus</a> 

<a href="#" class-"list-group-item"»Porta ac consectetur ac</a> 

<a href="#" class-"list-group-item"»Vestibulum at eros</a> 
«/div» 


效果 如 图 14.24 所 示 。 


Dapibus ac facilisis in 
Morbi leo risus 


Porta ac consectetur ac 


Cras justo odio e Vestibulum at eros 


图 14.23 List group 中 的 badge 图 1424 List group 是 链接 
或 者 更 加 复杂 的 内 容 〈 带 标题 和 文本 ): 


<div class="list-group"> 
<a href= class="list-group-item active"> 
<h4 class="list-group-item-heading">List group item heading</h4> 
<p class="list-group-item-text">Donec id elit non mi porta gravida at 
eget metus. Maecenas sed diam eget risus varius blandit.</p> 
</a> 
<a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading">List group item heading</h4> 
<p class="list-group-item-text">Donec id elit non mi porta gravida at 
eget metus. Maecenas sed diam eget risus varius blandit.</p> 
</a> 
<a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading">List group item heading</h4> 
<p class="list-group-item-text">Donec id elit non mi porta gravida at 
eget metus. Maecenas sed diam eget risus varius blandit.</p> 
</a> 
</div> 


效果 如 图 14.25 所 示 。 


List group item heading 
Donec id eit non mi pori grevada at eget 
metus. Maecenas sed dam eget sus varus 
barat 


List group item heading 
Donec id eit non mi porta gravda at eget 
metus. Maeceras sed dam eget rsus varus 
bandt. 


图 14.25 Listgroup 中 有 复杂 文本 
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类 似 List group 这 样 的 组 件 在 移动 时 代 特 别 受 宠 ，Bootstrap 加 上 它 也 算是 顺应 潮流 。 
14.6 组件 更 新 一 一 Panels 


Bootstrap 的 panel 和 jQueryMobile 的 panel 完全 不 是 一 个 东西 , Bootstrap 的 panel 在 语 
义 上 是 介 于 dialog 和 alert 之 间 的 一 个 组 件 , 你 可 以 在 需要 放置 一 些 不 是 特别 重要 的 内 容 到 
一 个 盒子 时 使 用 panel 组 件 。 

最 基本 的 panel 其 实 就 只 是 为 内 容 加 上 了 边框 和 内 外 边 距 : 


<div class="panel panel-default"> 
<div class="panel-body"> 
Basic panel example 
</div> 
</div> 


效果 如 图 14.26 所 示 。 


Basic panel example 


图 14.26 panel 


panel 可 以 拥有 标题 〈.panel-heading )， 同 时 标题 里 面 可 以 加 上 <hl>-<h6> 标 签 
C.panel-title) : 


<div class="panel panel-default"» 
<div class="panel-heading">Panel heading without title</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 


效果 如 图 14.27 所 示 。 


Panel heading without title 


Panel content 


Panel title 


Panel content 


图 14.27 带 heading 的 panel 
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因为 panel 在 语义 上 是 一 个 完整 容器 ， 当 然 也 可 以 有 footer: 


<div class="panel panel-default"» 
<div class="panel-body"> 
Panel content 
</div> 
<div class="panel-footer">Panel footer</div> 
</div> 


效果 如 图 14.28 所 示 。 


Panel content 


Panel footer 


图 14.28 带 footer 的 panel 


和 button 等 组 件 类 似 ，panel 也 可 以 加 上 上 下 文 类 (contextual state classes): 


<div class="panel panel-primary"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
<div class="panel panel-success"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
<div class="panel panel-warning"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
<div class="panel panel-danger"> 
<div class="panel-heading"> 
<h3 class="panel-title">Panel title</h3> 
</div> 
<div class="panel-body"> 
Panel content 
</div> 
</div> 
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效果 如 图 14.29 所 示 。 


iOS 85:38 - iPhone Retina (4-inch) / iOS 7.0 (11A465) 
Carrier F 3:24 PM - 
localhost 


Panel title 


Panel content 


Panel title 


Panel content 


Panel title 


Panel content 


Panel title 


Panel content 


Panel title 


Panel content 


图 14.29 带 上 下 文 指示 的 panel 


在 table 和 List group 与 panel 结合 使 用 会 获得 无 颖 的 设计 效果 : 


<div class="panel panel-default"> 
<div class-"panel-heading"»Panel heading</div> 
<!-- panel-body 在 没有 的 情况 下 也 能 正确 显示 --> 
<div class="panel-body"> 
<p>Some default panel content here. Nulla vitae elit libero, a pharetra 
augue. Aenean lacinia bibendum nulla sed consectetur. </p> 


</div> 
<!-- 表格 --> 
«table class-"table"» 
<thead> 
«tr» 
<th>#</th> 


<th>First Name</th> 
<th>Last Name</th> 
<th>Username</th> 
«tr 
</thead> 
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效果 如 图 14.30 和 图 14.31 所 示 。 


Panel heading 


Some default panel content here. Nulla vitae elit libero, a 
pharetra augue. Aenean lacinia bibendum nulla sed consectetur. 


# — First Name Last Name Username 
1 Mark Otto Gmdo 

2 Jacob — Thomton @fat 

3 n the Bird Gtwitter 


Panel heading 

# First Name Last Name Username 
1 Mark Otto Gmdo 

2 Jacob Thornton Gfat 

3 Larry the Bird Gtwitter 


1431 ， 带 无 边框 表格 的 panel (没有 .panel-body) 
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<div class="panel panel-default"» 

<!-- Default panel contents 一 -> 

<div class="panel-heading">Panel heading</div> 

<div class="panel-body"> 

<p>Some default panel content here. Nulla vitae elit libero, a pharetra 
augue. Aenean lacinia bibendum nulla sed consectetur. </p> 

</div> 


<i List group ==> 
<ul class="list-group"> 


<li "list-group-item">Cras justo odio</li> 
«li ist-group-item"»Dapibus ac facilisis in«/li» 
«li ist-group-item"»Morbi leo risus«/li» 
«li ist-group-item"»Porta ac consectetur ac</1i> 
<li class-"list-group-item"»Vestibulum at eros</1i> 
</ul> 
</div> 


效果 如 图 14.32 所 示 。 


Panel heading 


Some default panel content here. Nulla vitae elit libero, a 
pharetra augue. Aenean lacinia bibendum nulla sed consectetur. 


Cras justo odio 

Dapibus ac facilisis in 
Morbi leo risus 

Porta ac consectetur ac 


Vestibulum at eros 


图 14.32. 4f List group 的 panel 


使 用 panel 的 要 诀 在 于 一 一 把 它 当 做 一 个 容器 就 好 了 ， 其 余 的 自行 发 挥 。 
14.7 从 Bootstrap 2 迁移 到 Bootstrap 3 


Bootstrap 3 相 较 于 之 前 版 本 做 了 很 大 的 更 改 ， 如 果 你 深度 使 用 Bootstrap 2 又 想 迁 移 到 
Bootstrap 3 上 来 ， 那 么 可 能 需要 做 一 些 移植 工作 ， 表 14-3 展示 了 哪些 class 被 新 的 class 所 
替换 了 。 


表 14-3 Bootstrap 3 中 对 应 Bootstrap 2 中 了 哪些 class 被 替换 了 


Bootstrap 2.x Bootstrap 3.0 
.container-fluid .container 
row-fluid TOW 
.span* .col-md-* 
.Offset* .Col-md-offset-* 
.brand .navbar-brand 
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Bootstrap 2.x 


nav-collapse 


Bootstrap 3.0 
-navbar-collapse 


nav-toggle -navbar-toggle 
.btn-navbar -navbar-btn 

.hero-unit .jumbotron 

con-* .glyphicon .glyphicon-* 
-btn -btn .btn-default 
-btn-mini .btn-xs 

.btn-small .btn-sm 

.btn-large .btn-lg 


.visible-phone 


.visible-sm 


.visible-tablet 


.visible-md 


.visible-desktop .visible-lg 
-hidden-phone -hidden-sm 
-hidden-tablet .hidden-md 
-hidden-desktop .hidden-lg 
.input-small .input-sm 
.input-large .input-lg 


.Checkbox.inline .radio.inline 
.input-prepend.input-append 


.add-on 
thumbnail 
ul.unstyled 
ul.inline 


.checkbox-inline.radio-inline 
input-group 
input-group-addon 
img-thumbnail 
-list-unstyled 

list-inline 


表 14-4 是 Bootstrap 3 中 新 增 了 哪些 class。 


表 14-4 Bootstrap 3 新 增 class 


Element 描述 

Panels .panel .panel-default.panel-body.panel-title 
.panel-heading. panel-footer.panel-collapse 

List groups Est-gronp list-Grünip-itent . 
-list-group-item-text.list-group-item-heading 

Glyphicons .glyphicon 

Jumbotron .jumbotron 

Tiny grid («768 px) .col-xs-* 

Small grid (7768 px) -col-sm-* 

Medium grid (7992 px) .col-md-* 

Large grid (71200 px) .col-Ig-* 

Offsets -col-sm-offset-*.col-md-offset-* .col-Ig-offset-* 

Push -col-sm-push-*.col-md-push-*.col-Ig-push-* 

Pull -col-sm-pull-*.col-md-pull-*.col-Ig-pull-* 

Input groups nput-group.input-group-addon.input-group-btn 


Form controls 


-form-control.form-group 


Button group sizes 
Navbar text 


-btn-group-xs.btn-group-sm.btn-group-lg 
-navbar-text 


Navbar header 


-navbar-header 
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Element 
Justified tabs / pills 
Responsive images 
Contextual table rows 


-nav-justified 
img-responsive 


.success.danger.warning.active 


Contextual panels 
Modal 
Thumbnail image 


.panel-success.panel-danger.panel-warning.panel-info 
.modal-dialog.modal-content 
img-thumbnail 


Well sizes 
Alert links 


.well-sm.well-lg 
.alert-link 


还 有 一 些 class 被 移 除 掉 了 ， 如 表 14-5 所 示 。 


表 14-5 Bootstrap 2 中 被 移 除 的 class 


Element 从 2x 中 移 除 3.0 等 价 的 class 
Form actions form-actions N/A 


Search form N/A 

Fluid container „container (no more fixed grid) 
Fluid row .Tow (no more fixed grid) 
Navbar inner N/A 

Dropdown submenu N/A 

Tab alignments N/A 


Jul RATE 5) OXE class 麻烦 ,那么 可 以 使 用 一 个 在 线 工 具 (http://upgrade-bootstrap. 
bootply.com/) 来 自动 替换 ， 如 图 14.33 所 示 。 


Upgrade to Bootstrap 3 


This upgrade service ls based on Bootstrap 3.0.0. 


Bootstrap 3 is a major overhaul, and there are a Bootstrap 2.x 
lot of changes from Bootstrap 2x. This 
conversion service is intended to help you 


«dv cless-"container fud" »«/div-] 
upgrade to Bootstrap 3. 


Thie upgrade too! repiaces the Bootstrap 2.x CSS 
class names with Bootstrap 3.0 class names. 
Adahonaly tnis too! converts Navbar, Modal and 
other components in accordance with the 
Bootstrap 3.0 docs. 


See tho complete Migration Guide for the latest 


changes. 
Major CSS Changes 
Boolstrop 2x Boctstrap 3.0 
‘container uid container 


COE V 


Bootstrap 3.0 RC 2 


ravbar nav nav navbarmnay 


«dv clsss-' container »e/div» 
hero-unit jumbotron 


图 14.33 Bootstrap 3 升级 工具 


全 注意 : http://bootply.com/ 上 还 有 许多 非常 有 用 的 工具 . 
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虽说 纯粹 的 HTML 5 应 用 正在 移动 世界 开始 崛起 ， 但 是 不 可 避免 的 是 ， 在 Android 和 
iOS 两 大 阵营 里 ， 应 用 商店 都 是 应 用 程序 的 主要 分 发 渠道 ， 如 何在 不 抛弃 现 有 Web 技术 的 
条 件 下 开发 能 在 应 用 商店 上 架 的 程序 呢 ? PhoneGap 或 许 是 你 的 选择 。 


15.1 PhoneGap 101 


在 前 面 的 章节 中 ， 或 多 或 少 提 到 了 PhoneGap 这 个 东西 ， 那 么 首先 第 一 个 问题 ， 
PhoneGap 究竟 是 什么 ? 

iOS 发 布 后 ， 世 界 上 多 了 一 种 职位 叫做 iOS 应 用 开发 工程 师 ， 这 些 工程 师 使 用 10S 平 
台 上 的 技术 (如 Object-C) 开发 基于 iPhone 等 设备 的 应 用 程序 ， 一 切 都 很 美好 。 不 久 后 ， 
Google 发 布 了 Android， 于 是 世界 上 又 多 了 一 种 职位 叫做 Android 应 用 开发 工程 师 ， 他 们 
使 用 Java 等 技术 开发 基于 Android 设备 的 应 用 程序 ， 再 后 来 ， 又 出 现 了 Windows Phone 工 
程 师 和 Palm 工程 师 …… 由 于 这 些 移动 平台 同 质 化 严重 ， 很 可 能 在 同一 家 公司 里 ， 一 大 波 
工程 师 都 写 着 长 得 一 模 一 样 但 使 用 完全 不 同 技术 的 程序 一 一 这 实在 是 太 可 怕 了 ! 

还 好 有 PhoneGap 这 样 的 跨 平台 技术 出 现 了 。 

PhoneGap 是 一 个 免费 的 开源 的 移动 框架 , 它 能 够 让 你 用 你 最 钟爱 的 Web 技术 HTML. 
JS 和 CSS 创建 跨 平 台 的 移动 应 用 ， 如 图 15.1 所 示 。 


图 15.1 PhoneGap 


按照 官方 的 说 法 ，PhoneGap 的 作用 是 将 你 的 Web App 打包 起 来 (Wirap your app with 
PhoneGap) 以 便 部 署 到 特定 的 移动 平台 上 (Deploy to mobile platforms). 
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PhoneGap 在 不 同 移动 平台 与 浏览 器 之 间 搭 建 了 一 座 桥梁 , 一 方面 它 可 以 将 你 的 纯 Web 
应 用 打包 在 本 地 应 用 里 面 ， 另 一 方面 它 提供 了 一 个 统一 的 JavaScript API 供 Web 应 用 调用 
那些 浏览 器 平台 不 支持 的 特性 : 诸如 通知 和 摄像 头等 。 而 且 PhoneGap 团队 表示 ， 他 们 提 
供 的 API 是 面向 未 来 的 API 一 一 这 意味 着 如 果 以 后 平台 的 浏览 器 自身 支持 了 摄像 头 功能 ， 
那么 PhoneGap 也 会 转 而 调用 浏览 器 自身 的 API。 

PhoneGap 文 持 许多 设备 并 提供 了 丰富 的 特性 ， 具 体 参见 如 图 15.2 所 示 。 


Accelerometer 


< 


Camera 


Compass 


ES < [uS 


Contacts 


File 


< 
< 


Geolocation 
Media 

Network 
Notification (Alert) 


Notification (Sound) 
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Notification (Vibration) 
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Storage 
图 15.2 PhoneGap 特性 支持 表 


PhoneGap 团队 热爱 开源 事业 ， 从 PhoneGap 项 目 分 化 出 了 其 核心 也 就 是 cordova 贡献 
给 了 Apache 基金 会 ，PhoneGap 现在 构建 于 cordova 之 上 。 在 开发 特定 平台 的 应 用 之 前 ， 
你 需要 安装 PhoneGap 的 命令 ITER (之 前 是 cordova， 某 些 程度 你 可 以 将 PhoneGap 和 
cordova 理解 为 同义词 ), 该 工具 和 Sencha 的 命令 行 工具 类 似 , 用 于 项 目的 创建 和 打包 编译 
运行 等 。 

安装 m 有 个 前 提 条 件 是 必须 安装 Node.js Chttp://nodejs.org/ ) Ñ npm, 之 后 从 
官方 源 安装 PhoneGap 即 可 : 

$ sudo npm install -g phonegap 

安装 好 后 就 可 以 创建 我 们 的 项 目 了 。 开 发 特定 平台 的 PhoneGap 应 用 时 ， 需 要 安装 对 
应 平台 的 SDK， 接 下 来 我 们 以 iOS 平台 为 例 讲解 PhoneGap GOS 项 目的 前 提 是 你 得 有 
Xcode): 

$ npm install ios-sim -g 

安装 从 命令 行 启 动 iOS 模拟 器 的 工具 : 


$ phonegap create hello com.example.hello "HelloWorld" 
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这 名 命令 第 一 个 参数 指定 了 hello 作为 项 目 目标 生成 目录 , 其 下 的 www 子 目 录用 于 放 
置 你 应 用 的 主页 面 , 其 下 的 ess. js 和 img 等 目录 遵循 常见 的 Web 开发 命名 约定 , config.xml 
文件 包含 一 些 用 于 生成 和 分 发 应 用 的 重要 元 数据 。 

hello 后 面 的 两 个 参数 是 非 必 须 的 ，com.example.hello 参数 为 项 目 提供 了 一 个 逆 域 名 
(reverse-domain) 风格 的 标识 符 ，HelloWorld 则 是 应 用 的 显示 文本 。 

$ cd hello 


默认 情况 下 PhoneGap 创建 的 骨骼 程序 的 目录 结构 是 这 样 的 : 


merges 
platforms 
plugins 
WWW 


config.xml 
css 


index.html 
js 

res 

spec 
spec.html 


其 中 首页 是 www/index.html 文件 ， 默 认 引 用 了 www/js/index.js 文件 ， 在 这 里 你 可 以 
随意 更 改 ， 或 者 将 你 自己 的 整个 app 都 挪 过 来 。 
$ phonegap build ios 


build 命令 用 于 构建 特定 平台 的 应 用 ， 构 建 过 程 会 在 platforms. 目录 生成 相应 的 目标 文 
fF, www 目录 也 会 被 复制 到 platforms/xxx/www 目录 下 : 


merges 
[一 ios 
platforms 
ios 
CordovaLib 
HelloWorld 
HelloWorld.xcodeproj 
build 
cordova 
WWW 
plugins 
ios.json 
WWW 


此 时 你 的 程序 已 经 打包 完成 ， 你 可 以 直接 运行 下 面 的 命令 来 打开 目标 程序 : 

$ phonegap run ios 

如 果 你 有 一 定 的 iDOS/Xcode 相关 编程 经 验 ， 也 可 以 用 Xcode 自己 进行 编译 运行 : 

(1) 打开 platforms/ios/HelloWorld.xcodeproj 文件 ， 主 面板 里 你 可 以 更 改 一 些 的 配置 如 
更 改 app 图 标 或 启动 图 等 ; 

(2) 在 左 侧面 板 选中 .xcodeproj 文件 ; 

(3) 接着 选中 hello app; 
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(4) 在 工具 栏 中 选择 合适 的 模拟 器 ， 单 击 rm (播放 按钮 ) 按钮 。 效 果 如 图 15.3 所 示 。 


HelloWorld.xcodeproj 


Running HelloWorld on iPhone Retina (3.5-inch) 


N 
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最 后 程序 运行 的 界面 如 图 


“Ms 


15.3 用 Xcode 编译 


15.4 所 示 。 


PHONEGAP 
DCEISREADY | 


154 默认 PhoneGap 应 用 
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Qi. 部 署 应 用 到 真实 设备 或 者 苹果 商店 并 不 是 本 书 涉 及 的 主题 ， 具 体 可 以 参考 苹果 开发 


者 网 站 ( https//developer.apple.com/ ) 上 的 相关 文档 。 


15.2. 开发 基于 PhoneGap 的 程序 


实际 上 ， 如 果 你 的 应 用 用 不 上 联系 人 等 和 设备 直接 相关 的 功能 ， 完 全 可 以 只 把 
PhoneGap 当做 一 个 打包 工具 用 。 
开发 基于 PhoneGap 程序 主要 有 两 部 分 与 PhoneGap 相关 : 


口 
口 


配置 config.xml 文件 ; 
通过 PhoneGap 的 API 调用 设备 功能 。 


应 用 的 很 多 行为 都 由 一 个 全 局 的 config xml 文件 来 控制 ， 它 位 于 www 目录 下 ， 用 来 指定 
Cordova 的 API 功能 、 要 启用 的 插件 和 一 些 平台 相关 的 设置 。 如 下 面 这 个 典型 的 配置 文件 : 


<widget id="com.example.hello" version="0.0.1"> 


<name>HelloWorld</name> 
<description> 
A sample Apache Cordova application that responds to the deviceready 


event. 


</description> 

<author email="dev@callback.apache.org" href="http://phonegap.com"> 
Apache Cordova Team 

</author> 

<content src="index.html" /> 

<access origin="*" /> 

<preference name="Fullscreen" value="true" /> 

<preference name="WebViewBounce" value="true" /> 


</widget> 


上 面 这 些 配 置 被 所 有 PhoneGap 支持 的 平台 所 支持 : 


DODO 


<widget> 元 素 的 id 属性 是 逆 域 名 风格 的 标识 符 ，version 属性 则 是 完整 版 本 标识 。 
<name> 元 素 指定 应 用 的 名 字 ( 对 于 iOS/Android 来 说 就 是 home 界面 看 到 的 名 字 ) 。 
<description> 和 <author> 这 些 原 信息 会 出 现在 应 用 商店 里 ， 也 可 以 用 作 搜 索 用 。 
<content> 元 素 定 义 程序 启动 后 的 首页 ， 默 认 值 是 index.html。 

<access> 元 素 定义 应 用 可 与 哪些 外 部 域 进行 通信 ，* 表 示 不 限制 。 
<preference> 标 签 以 name/value 对 方式 设置 各 种 配置 项 ， 可 以 设置 的 项 有 的 是 全 局 
的 ， 有 的 是 特定 平台 的 。 


要 调用 PhoneGap API 必须 引入 phonegap.js， 该 文件 在 使 用 phonegap 命令 行 工具 编译 
时 会 自动 在 platforms/ios/www 目录 下 生成 ， 它 的 作用 是 提供 特定 平台 的 事件 和 API 等 等 。 
其 中 PhoneGap 中 一 个 最 重要 的 事件 是 deviceready 事件 ， 你 可 以 这 样 绑 定 该 事件 ; 


document.addEventListener('deviceready', onDeviceReady, false); 


在 onDeviceReady 中 ， 你 可 以 调用 所 有 PhoneGap 提供 的 API， 有 一 点 需要 注意 的 是 ， 
自 Cordova 3.0 起 所 有 设备 级 别 的 API 都 被 实现 为 插件 形式 , 使 用 phonegap local plugin add 
命令 可 以 自动 往 项 目 中 引用 插件 : 


$ phonegap local plugin add 
https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git 
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上 面 这 行 命令 为 当前 项 目 添加 了 联系 人 插件 ， 工 具 会 在 plugins 目录 下 写 入 相应 的 文件 : 


E ios.json 
org.apache.cordova.contacts 
LICENSE 
README.md 
RELEASENOTES.md 
docs 
plugin.xml 
Sre 
test 
Www 


与 此 同时 你 还 必须 往 config.xml 写 入 下 面 这 些 配置 项 〈 仅 针对 iOS 平台 ): 


«feature name-"Contacts"» 
Xparam name-"ios-package" value-"CDVContacts" /» 
«/feature» 


下 面 的 代码 在 DeviceReady 的 时 候 读 取 设 备 联 系 人 信息 : 


function onDeviceReady() ( 
// ContactFindOptions 是 phonegap 提供 的 全 局 对 象 
var options = new ContactFindOptions(); 
options.filter = "Bob"; 
var fields - ["displayName", "name"]; 
// navigator.contacts.find 方法 可 以 异步 地 查找 手机 上 的 联系 人 信息 


navigator.contacts.find(fields, onSuccess, onError, options); 


H 
// 调用 成 功 后 会 收 到 一 个 contacts 对 象 ， 在 这 里 你 可 以 做 任何 你 想 要 做 的 事情 〈 比 如 窃取 用 户 
联系 人 信息 什么 的 》 
var html 
function onSuccess(contacts) { 

for (var i = 0; i < contacts.length; i++} ( 

html += "Display Name = " + contacts[i].displayName + '«br»'; 

} 

document.getElementById('output').innerHTML = html; 
) 


function onError(contactError) { 


// 如 果 用 户 拒绝 了 应 用 获取 联系 人 的 请 求 或 者 因为 其 他 原因 调用 失败 


alert('onError!'); 


完成 这 些 后 重新 编译 并 运行 你 的 项 目 后 打开 APP. 会 弹出 请 求 联系 人 信息 的 对 话 框 , 同 
意 后 联系 人 会 被 显示 在 界面 上 ， 如 图 15.5 所 示 。 


"HelloWorld" Would Like to 
Access Your Contacts 


Don’t Allow OK 


图 15.5 PhoneGap 获取 联系 人 
PhoneGap 的 绝 大 部 分 API 都 是 类 似 的 用 法 ， 具 体 可 以 参考 http://docs.phonegap.com/。 
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本 章 将 简单 讲解 一 下 其 他 书本 还 没有 涉足 但 又 足够 流行 值得 一 提 的 技术 框架 ， 它 们 虽 
然 在 很 大 程度 上 和 前 面 介绍 的 几 种 技术 有 重 且 的 地 方 ， 但 是 它们 也 有 各 自 独特 且 不 可 替代 
的 地 方 。 


16.1 Foundation 


Foundation (http://foundation.zurb.com/) 刚 出 现时 号 称 是 Bootstrap 在 移动 时 代 的 终结 
者 ， 它 标榜 自己 是 “世界 上 最 先进 响应 式 前 端 框架 (The most advanced responsive front-end 
framework in the world)”。 它 的 设计 理念 也 是 移动 优先 , 并 且 提供 了 和 前 面 介绍 的 Bootstrap 
3 中 类 似 的 响应 式 栅 格 系统 ， 在 Bootstrap 3 正式 发 布 之 前 ，Foundation 4 早 于 Bootstrap 实 
现 了 这 些 特 性 ， 搜 走 了 一 大 波 用 户 ， 如 图 16.1 所 示 。 


I goo gir go 
pi 
1 

goo ggo gor 


图 16.1 Foundation 4 
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Foundation 项 目 和 Bootstrap 非常 类 似 ， 提 供 了 一 套 网 格 系统 ， 一 堆 CSS 组 件 和 
JavaScript 组 件 。Foundation 在 响应 式 设计 上 面 下 了 很 多 功夫 ， 也 提供 了 一 套 一 致 性 很 好 的 
UI 组 件 ， 如 图 16.2 和 图 16.3 所 示 。 
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图 163 Foundation UI 组件 (表单 ) 


在 视觉 风格 上 Foundation 显得 硬朗 和 扁平 一 些 , 用 色 上 比 Bootstrap 更 加 浓烈 一 些 , 组 
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件 类 型 和 Bootstrap 差不多 ， 有 一 点 值得 一 提 的 是 Foundation 的 所 有 JavaScript 插件 支持 
Zepto (Bootstrap 只 支持 jQuery)， 这 样 你 在 构建 移动 应 用 时 页 面 请求 总 尺寸 要 小 很 多 。 

Foundation 的 Grid 系统 和 Bootstrap 3 非常 相似 (或 者 说 Bootstrap 3 和 Foundation 非常 
相似 ): 


<div class="row"> 
<div class-"small-2 large-4 columns">...</div> 


<div clas small-4 large-4 columns">...</div> 
<div class-"small-6 large-4 columns">...</div> 
</div> 
<div class="row"> 
<div large-3 columns">...</div> 
<div large-6 columns">...</div> 
<div large-3 columns">...</div> 
</div> 
<div class="row"> 
«div c small-6 large-2 columns"»5...«/div» 
«div c small-6 large-8 columns"»...«/div» 
<div class-"small-12 large-2 columns"»5...«/div» 
«/div» 
«div c 
«div columns"»...«/div» 


<div class-"small-9 columns"»5...«/div» 
«/div» 
<div class="row"> 

<div clas large-4 columns">...</div> 

<div class="large-8 columns">...</div> 
</div> 
<div class="row"> 

<div clas small-6 large-5 columns">...</div> 

<div class="small-6 large-7 columns">...</div> 
</div> 
<div class="row"> 

<div clas large-6 columns">...</div> 

<div class="large-6 columns">...</div> 
</div> 


效果 如 图 16.4 所 示 。 


图 16.4 Foundation 4 Grid 系统 


Foundation 同样 有 自己 的 响应 式 实 用 类 : 


/* 响应 实用 类 */ 
-Show-for-small /* 768px 以 下 可 见 */ 
-Show-for-medium-down /* 768px 及 以 下 可 见 */ 
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pin 


Foundation 另 一 大 特点 是 提供 了 许多 预 设 布局 ， 这 给 一 些 常见 页 面 的 开发 提供 了 非常 
大 的 便利 ， 效 果 如 图 16.5 所 示 。 
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可 以 看 到 ， 在 Foundation 提供 的 预 设 布局 里 面 常 见 的 营销 和 博客 页 面 都 有 相应 的 布局 
代码 ， 你 只 管用 就 是 。 

Foundation 本 身 的 样式 用 SASS 写成 (Bootstrap 是 LESS)， 对 于 SASS 用 户 来 说 可 能 
Foundation 更 加 友好 。 


16.2 Semantic-UI 
Semantic-UI (http://semantic-ui.com/) 是 另 一 个 Bootstrap 的 有 力 竞 争 者 ， 如 图 16.6 
所 示 。 
Food Fruit: Apples Name 
Food ^ Fruit ^ Apples 


Breadcrumb Form 


deru amenu to show thi 


1 2 3 Friends ^ Messages Profile 


Friends Messages Profile 


Grid Menu 


grid helps harmonize negative 


We're sorry we can't process your idea just yet [i Status 

Please enter your name John Approved 
John Unconfirmed 
Sally Denied 


Message Table 


图 16.6 Semantic-UI 


它 的 视觉 风格 和 Bootstrap 类 似 , 它 最 大 的 特点 是 代码 更 加 语义 化 , 以 下 是 两 者 代码 的 
对 比 : 


<!-- semantic-ui 代码 --> 

<main class="ui three column grid"> 
«aside class="column">1</aside> 
<section class="column">2</section> 
<section class="column">3</section> 

</main> 

<!-- 对 应 的 bootstrap 代码 --> 


<div class="row"> 
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<div class="col-1g-4">1</div> 

<div class="col-1g-4">2</div> 

<div class="col-1g-4">3</div> 
</div> 


«!—— semantic-ui 代码 --> 
<nav class="ui menu"> 
<h3 class="header item">Title</h3> 
<a class="active item">Home</a> 
<a class="item">Link</a> 
<a class="item">Link</a> 
<span class="right floated text item"> 
Signed in as <a href="#">user</a> 
</span> 
</nav> 
<!-- 对 应 的 bootstrap 代码 --> 
<div class="navbar"> 
<a class="navbar-brand" href="#">Title</a> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href ">Link</a></li> 
<li><a href="#">Link</a></li> 
<p class="navbar-text pull-right">Signed in as <a href="#" class=" 
navbar-link">User</a></p> 
</ul> 
</div> 
<!-- semantic-ui 代码 --> 
<button class-"large ui button"> 
Xi class-"heart icon"></i> 
Like it 
X/button» 
<!-- 对 应 的 bootstrap 代码 --> 
<button type="button" class="btn btn-primary btn-1g"> 
<span class="glyphicon glyphicon-heart"></span> 
Like 
</button> 


Semantic-UI 现在 社区 发 展 势头 良好 , 组 件 齐全 ， 如果 你 用 够 了 Bootstrap, Semantic-UI 
也 是 一 个 不 错 的 选择 。 


16.3 Pure 


Pure (http;//purecss.io/) 是 雅虎 YUI 团队 开源 的 CSS 框架 ， 官 方 对 其 定义 是 “一 组 可 
用 在 所 有 Web 项 目 中 的 小 巧 的 响应 式 的 CSS 模块 ”(A set of small, responsive CSS modules 
that you can use in every web project)， 如 图 16.7 所 示 。 

Pure 整体 视觉 风格 非常 简洁 ， 包 含 的 功能 集 也 比较 小 ， 以 下 是 Pure 重要 的 特性 。 


1. 响应 式 的 Grid 框架 


Pure 的 Grid 框架 实现 原理 和 用 法 与 Bootstrap 3/Foundation 4 相 比 大 同 小 异 : 
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Pure 


A set of small, responsive CSS mo 


that you can use in every web prc 
Link rel="stylesheet" href»^http://yvi.yahooapis. cos/pure/0.3.8/pure 


图 16.7 Purecss 


«div class-"pure-g"» 
«div class-"pure-u-1-3"» 


Xp»Thirds«/p» 

«/div» 

«div class-"pure-u-1-3"» 
Xp^Thirds«/p» 

«/div» 

«div class-"pure-u-1-3"» 
<p>Thirds</p> 

</div> 

</div> 


2. 建立 在 Normalize.css 之 上 


可 第 
EUH. 
- 套 按钮 样式 ， 如 图 16.8 所 示 。 


的 基础 样式 ， 可 以 有 效 解决 跨 浏 览 器 的 兼容 问题 。Normalize.css 是 著名 的 CSS 重 


APueButon A Pure Button 


AnActveButton | An Active Button 


amsnalauon  SmatButon Regular Button Large Button Extra Large Button 


$ Settings E Checkout 


图 16.8 Pure 的 Button 


Ts 
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一 套 菜单 样式 ， 包 含 导航 、 下 拉 菜 单 和 分 页 器 等 (下 拉 菜 单 需要 YUIJS 的 支持 )， 如 
图 16.9 所 示 。 


Menu with Headings 


SITE TITLE Home Flickr Messenger Sports Finance 


Add Dropdowns to Menus 


Flickr Messenger Sports Finance Other ~ 


MORE FROM YAHOO! 


Menus with Disabled Items Autos 
Flickr 
SITE TITLE Home Flickr 
Answers 
Even More L 
Paginators 


图 169 Pure 的 菜单 和 分 页 器 
一 套 表单 样式 ， 如 图 16.10 所 示 。 
Default Form 


A compact inline form 


Stacked Form 


AStacked Form 


Email 


Password 


State 
AL $ 


D Remember me 


图 1610 Pure 表单 
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一 套 表格 样式 ， 如 图 16.11 所 示 。 

用 于 打包 特定 模块 的 定制 器 和 配套 主题 制作 器 (http://yui.github.io/skinbuilder/?mode=pure)。 
Pure 的 主题 制作 器 包含 非常 强大 的 事实 预览 功能 ， 而 且 也 提供 了 预 设 的 调 色 板 ， 用 起 

来 非常 顺手 ， 如 图 16.12 所 示 。 


# Make Model Year 
1 | Honda | Accord | 2009 


Toyota | Camy | 2012 


s Hyundai | Elanta | 2010 Skin Builder 


# Make Model Year 
1 | Honda | Accord | 2009 


| 


Schemes tems Code — 


Toyota | Camy | 2012 


3 E 2010 Horiz. padding: 10096 
nun | Be i Edit Master Color... 


# Make Model Year 

1 Honda Accord 2009 ym Border-radius: 10096 
: Edit Page Color... 
2 € ——————— MM 
3 


Toyota Camy 2012 


Hyundai Elantra 2010 e Text Contrast: 150 
# Make Model Year 
1 Honda Accord 2009 
2 | Toyota Camy | 2012 
3 | Hyundai | Elantra | 2010 Forms - Checkboxes and Radios Default Inline Form 
4 | Ford Focus | 2008 Checkbox option 
5 Nissan Sentra 200 O d n Legend 
®© Radio button choice 
6 BMW M3 2009 
Radio other choice 
7 Honda Civic 2010 
8 Kia Soul 2010 
图 16.11 Pure 的 表格 图 16.12 Pure 主题 制作 器 


Pure 中 默认 组 件 都 是 响应 式 的 ， 你 也 可 以 禁用 响应 特性 ， 而 且 Pure 非常 小 〈4.4KB 
minified + gzip)， 非 常 适 合 移动 端 网 站 的 开发 。 


16.4 Titanium 


Titanium ( http://www.appcelerator.com/titanium/ ) 和 PhoneGap 类 似 ， 人 允许 你 使 用 
JavaScript 技术 来 创建 跨 平台 的 原生 应 用 ,但 是 它 的 实现 思路 和 PhoneGap 完全 不 同 ， 它 会 
将 JavaScript 编译 为 目标 平台 的 原生 代码 (如 ObjectC)， 而 不 是 在 应 用 中 嵌入 浏览 器 。 

Titanium 是 appcelerator 公司 的 头号 产品 ，Titanium 有 自己 的 IDE (基于 
Eclipse) Titanium studio， 包 含 Mac. Windows 和 Linux 等 各 个 平台 的 版 本 ， 你 需要 注 
册 账 号 才能 下 载 和 安装 ， 注 册 安 装 好 后 即 可 利用 Titanium 的 SDK 开发 真正 的 原生 程序 ， 
如 图 16.13 所 示 。 

编译 为 原生 程序 使 得 应 用 性 能 和 用 户 体验 更 好 ， 但 是 你 无 法 同时 使 用 其 他 Web 技术 
(如 CSS fil HTML) 来 创建 UI。Titanium 真正 的 好 处 其 实在 于 针对 10S 和 Android 平台 UI 
开发 的 共有 子 集 提 供 了 一 套 JavaScript 的 接口 ， 从 这 个 层面 加 快 你 应 用 的 开发 速度 ， 降 低 
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成 本 。 和 PhoneGap 相 比 ， 各 有 利弊 ， 大 家 一 定 要 按 需 取 用 。 


图 16.13 用 Titanium 开发 的 原生 程序 
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本 章 的 标题 提 了 一 个 诱 人 的 问题 ， 可 惜 笔者 尚 不 敢 称 自己 是 优秀 的 前 端 工 程 师 ， 所 以 
这 里 的 自问 自 答 有 些 浮 夸 之 嫌 ， 但 笔者 愿意 倾 力 分 享 在 作为 前 端 工程 师 时 关注 些 什么 ， 经 
历 过 什么 ， 望 能 帮助 到 大 家 一 二 。 


17.1 Node.js 


雅虎 “发 明 ” 了 前 端 工程 师 这 个 职业 ， 而 Nodejs 的 流行 让 这 个 职业 真正 对 得 起 工程 
师 这 个 称号 。 


17.1.1 什么 是 Node js 


如 果 让 我 用 一 句 话 定义 Nodejs 是 什么 ， 我 想 应 该 是 这 样 的 : 

Node.js 是 服务 器 端的 JavaScript. 

JavaScript 在 过 去 只 是 一 种 连 名 字 都 要 挂靠 大 佬 的 小 脚本 语言 , 由 于 历史 的 阴 差 阳 错 一 
直 活 到 了 现在 ， 而 且 越 发 壮大 ， 成 为 程序 员 世 界 的 主流 语言 之 一 。 但 是 JavaScript 在 很 长 
一 段 时 间 内 都 只 工作 在 浏览 器 这 个 环境 里 ， 浏 览 器 外 面 的 世界 有 多 精彩 它 一 无 所 知 。 

严格 地 说 ， 从 JavaScript 诞生 到 现在 , 不 断 有 人 在 尝试 将 JavaScript 带 到 服务 器 端 开发 
环境 : Alfresco, Helma 和 JSSP…… 但 它们 都 不 温 不 火 或 者 死 掉 了 【笔者 表示 自己 都 没 听 
过 大 部 分 这 些 技 术 )， 唯 有 Nodejs 一 枝 独 秀 ， 社 区 成 长 迅速 ， 大 小 企业 纷纷 投靠 其 怀抱 ， 
在 问 为 什么 之 前 ， 让 我 们 先 谈 谈 Nodejs 是 什么 。 

按照 Node.js 官方 的 说 法 , Node.js 是 一 个 搭建 在 Chrome 的 JavaScript 运行 时 上 的 平台 ， 
用 于 方便 地 构建 快速 和 可 扩展 的 网 络 程序 。Nodejjs 基于 事件 驱动 和 非 阻塞 的 IO 模型 使 得 
它 非常 轻 量 , 适合 于 运行 在 分 布 式 系统 上 的 数据 集中 型 和 实时 型 应 用 (Nodejs is a platform 
built on Chrome's JavaScript runtime for easily building fast, scalable network applications. 
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, 
perfect for data-intensive real-time applications that run across distributed devices. )。 初 看 来 或 
许 有 些 抽象 ， 让 我 们 抽 丝 剥 草 来 说 说 它 。 

一 谈 到 JavaScript， 都 知道 它 运行 浏览 器 环境 里 面 ， 大 家 熟悉 它 可 以 用 来 操作 DOM 节 


点 ， 发 起 Ajax 请 求 和 改变 页 面 样式 …… 一 直 以 来 JavaScript 都 是 前 端 工程 师 的 专利 ， 而 
Node.js 提供 了 一 个 环境 和 一 系列 的 API 使 得 JavaScript 可 以 编写 服务 器 端 甚至 系统 级 的 
程序 。 


比如 最 简单 的 WebSever: 
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var http = require('http'); 

http.createServer(function (req, res) { 
res.writeHead(200, ('Content-Type': 'text/plain']); 
res.end('Hello WorldWin'); 

py- Tiston tas *'12720.-0-1*)7 

console.log ('Server running at http://127.0.0.1:1337/'); 


将 这 些 代码 保存 为 examplejs， 然 后 在 命令 行 下 用 node 程序 执行 该 文件 即 可 (和 
python, ruby 等 类 似 ): 

$ node example.js 

Server running at http://127.0.0.1:1337/ 

除了 http 模块 ，Nodejs 还 包含 大 量 网 络 程序 相关 的 模块 ， 比 如 底层 的 TCP 接口 : 

var net = require('net'); 

var server = net.createServer(function (socket) ( 

Socket.write('Echo server\r\n'); 


socket .pipe (socket); 
)n; 


server.listen(1337, '127.0.0.1'); 


17.1.2 Node.js 基础 


使 用 Node.js 之 前 你 需要 安装 它 ，Nodejs 支持 绝 大 多 数 主流 的 操作 系统 平台 : Mac OS 
X, Windows 和 Linux (以 及 相应 的 发 行 版 ), 这 使 得 它 对 开发 和 部 署 都 相当 友好 。 以 Mac OS 
X 为 例 ， 只 需要 去 其 官网 Chttp:/nodejs.org/) 下 载 安装 包 一 路 下 一 步 安装 即 可 ，Nodejjs 是 
完全 开源 的 程序 ， 你 也 可 以 选择 自己 编译 源码 进行 安装 。 

Mac OS X 的 安装 包 中 包含 了 Node 主 程序 和 包 管 理 器 NPM， 安 装 好 后 ， 在 终端 键入 
node 可 以 进入 交互 式 shell (和 Chrome 的 console 一 样 的 东西 ): 

$ node 

» console.log('here is node shell') 

here is node shell 


undefined 
22 


AE: undefined X console.log 执行 后 的 返回 值 。 


我 们 先 看 看 前 面 的 Web Server 的 例子 的 注释 版 : 


//Node.js fll ruby, python 等 一 样 拥有 自己 的 模块 系统 
//require 函数 在 这 里 同步 获取 了 http 模块 ， 该 模块 是 Node .js 内 置 模块 
var http = require('http'); 
/ [http 模块 对 http 协议 做 了 高 层 封装 ， 调 用 createserver 方法 即 可 返回 一 个 server 实例 
/ /f& createServer 的 回调 会 在 客户 端 有 请 求 来 临时 被 调用 
//server 实例 1isten 用 于 监听 特定 的 端口 ， 第 二 个 参数 表示 hostname 
http.createServer(function (req, res) ( 
// 该 回调 函数 接受 两 个 参数 ，req 表示 request Gk) , res 表示 response (响应 ) 
//xeq 中 可 以 查询 请 求 头 和 请 求 体 等 内 容 
// .writeHead 方法 在 响应 中 写 入 头 信息 
res.writeHead(200, ['Content-Type': 'text/plain']); 
// end 以 字符 串 结束 当前 请 求 


*402* 


第 17 章 “如 何 成 为 优秀 的 前 端 工程 师 


res.end('Hello World\n'); 
ie rsEeni( i937: 1270-01) 
//console.log 会 将 信息 打印 在 shell Hi 
console.log('Server running at http://127.0.0.1:1337/"); 


可 以 看 到 ， 寥 寥 数 行 就 可 以 在 Node.js 中 搭建 一 个 Web 服务 器 ， 当 然 代码 简单 并 不 是 
Node.js 真正 厉害 的 地 方 ，Node.js 还 有 许多 值得 称道 之 处 ， 下 面 我 们 细 细 道 来 。 


17.1.3 Node.js 模块 系统 


能 否 支 撑 大 型 应 用 的 开发 ， 模 块 系统 是 非常 关键 的 存在 。 前 端 工程 师 们 都 知道 ， 浏 览 
器 中 JavaScript 是 不 包含 模块 系统 的 , 所 有 的 代码 都 写 在 一 个 个 的 文件 里 面 , 然后 在 HTML 
里 面 用 script 标签 进行 引用 , 这 样 的 方式 管理 代码 依赖 非常 困难 , 因此 只 能 用 外 部 工具 ( 比 
如 过 去 很 多 人 使 用 Ant 和 closure compiler 等 ) 来 对 源 代码 进行 管理 ,后 来 CommonJS 提出 
了 JavaScript 自己 的 模块 系统 规范 , Node.js 中 的 模块 系统 便 是 基于 Common]JS 的 一 个 实现 。 

Nodejs 中 定义 一 个 模块 非常 简单 ， 一 个 文件 就 能 自 成 一 个 模块 ， 如 新 建 一 个 foojs 
文件 : 

var circle = require('./circle.js'); 

console.log( 'The area of a circle of radius 4 is ' 

* circle.area(4)); 
然后 在 同 目录 再 建 一 个 circle.js: 
var PI = Math.PI; 


exports.area = function (r) { 
Felturn IBID R3 Fo Doge 


}; 


exports.circumference = function (r) { 
return 2 * PI © T3 


}; 


模块 circlejs 导出 了 两 个 公共 方法 area 和 circumference， 要 在 模块 对 象 上 添加 属性 或 
方法 ， 可 以 在 一 个 特殊 的 exports 对 象 上 直接 赋值 。 

和 浏览 器 环境 不 一 样 ， 一 个 文件 中 的 局 部 变量 并 不 会 暴露 到 全 局 环境 〈 不 加 var 关键 
字 亦 然 )， 使 用 模块 时 也 不 会 污染 调用 者 的 执行 环境 ,这 点 改进 非常 重要 ， 因 为 服务 器 应 用 
通常 都 是 规模 巨大 的 ， 同 名 变量 会 非常 常见 。 

如 果 你 想 让 你 的 模块 导出 一 个 函数 或 者 一 个 完整 对 象 ， 而 不 是 将 属性 一 个 个 赋值 上 
去 ， 你 可 以 使 用 覆 写 module.exports 的 方式 。 

下 面 我 们 编写 一 个 square.js 模块 ， 该 模块 导出 一 个 构造 函数 : 

// 直 接 履 写 exports FRAKE module, VALES module .exports 的 方式 来 实现 

module.exports = function(width) { 

return ( 


area: function() { 
return width * width; 
b 
5 
} 


这 样 在 使 用 上 面 的 模块 时 会 得 到 一 个 函数 对 象 : 
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模块 


var square = require('./square.js'):; 
var mySquare - square(2); 
console.log('The area of my square is ' + mySquare.area()); 


Node.js 在 处 理 模块 循环 引用 时 非常 有 意思 ， 考 虑 这 样 一 个 例子 ，ajs 如 下 : 


console.log('a starting'); 

exports.done = false; 

var b = require('./b.js'); 
console.log('in a, b.done - $j', b.done); 
exports.done - true; 

console.log('a done'); 


bjs: 


console.log('b starting'); 

exports.done - false; 

var a = require('./a.js'); 
console.log('in b, a.done - $j', a.done); 
exports.done - true; 

console.log('b done'); 


main.js: 


console.log('main starting'); 

var a = require('./a.js'); 

var b = require('./b.js'); 

console.log('in main, a.done-$j, b.done-$j', a.done, b.done); 


当 main 模块 加 载 a 模块 时 ， 在 a 模块 里 会 加 载 b 模块 ， 接 着 进入 b 模块 时 又 会 加 载 a 
， 这 样 就 产生 了 循环 引用 ， 对 于 这 种 情况 ， 在 第 一 次 进入 b 模块 并 加 载 a 模块 时 ， 由 


F node 知道 a 模块 已 经 处 于 加 载 过 程 中 ， 于 是 会 立即 返回 一 个 exports 对 象 的 复制 (而 不 


是 无 


去 源 


fr fs 


D 
会 返 


限 循环 )， 此 时 a 模块 并 未 完全 加 载 结束 ， 因 此 执行 main.js 的 输出 结果 会 是 这 样子 的 : 


$ node main.js 
main starting 
a starting 


b starting 

in b, a.done = false 
b done 

in a, b.done = true 
a done 


in main, a.done=true, b.done=true 

Node 的 内 置 模块 有 的 被 编译 为 了 二 进 制 代码 , 如 果 你 有 兴趣 查看 核心 模块 的 源码 可 以 
码 仓 库 的 lib/ 目 录 下 查看 。 

Nodejs 包含 大 量 内 置 模块 ， 有 用 于 网 络 操作 的 http, https 和 net， 也 有 用 于 文件 操作 
和 path， 系统 级 process, cluster, OS fl rl, CHH] crypto, console 和 buffer 等 等 。 
Node 在 寻找 模块 时 会 遵循 一 系列 特定 的 规则 , 在 不 指明 路 径 的 情况 下 , 会 优先 寻找 内 
块 (如 http 和 net 等 )， 比 如 无 论 当前 目录 下 是 否 有 一 个 httpjs 文件 ，require(Chttp) 都 
回 内 置 的 HTTP 模块 。 

如 果 没 有 找到 内 置 模块 ， 则 会 寻找 系统 的 node modules 目录 和 当前 目录 下 的 


node modules 目录 ， 在 指定 模块 时 ， 后 绥 名 不 是 必须 的 《包括 :js、:json、.node)， 路 径 可 


以 使 


用 相对 路 径 或 者 绝对 路 径 : 
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require ('circle'); // 寻 找 系统 或 当前 目录 下 的 node modules 目录 
require('./circle'); // 模 块 必须 位 于 当前 目录 
require('../circle'); // 相 对 路 径 


require('/home/filod/circle'); // 绝 对 路 径 


当然 ， 如 果 你 的 模块 包含 较 多 的 东西 ， 包 目录 下 的 indexjs 可 以 作为 包 的 入 口 文件 被 
加 载 ， 如 require(/some-library) 时 会 尝试 加 载 .Jsome-libraryindex.js 或 /some-library/index.node 
文件 ， 如 果 你 想 手工 指定 包 目 录 被 下 载 的 入 口 文件 ， 你 需要 引入 package.json 文件 ， 并 这 
样 配置 : 

t 


"name" : "some-library", 
"main" : "./lib/some-library.js" 


17.1.4 Node.js 包 管理 系 统 NPM 


Node.js 虽然 用 着 古老 的 语言 , 但 是 却 完全 开辟 了 一 个 新 的 社区 生态 , 任何 健康 的 生态 
环境 都 离 不 开 包 管理 器 的 功劳 ，mby 有 gem, python 有 pip 和 eazy_install。 我 们 的 Node.js 
自然 也 有 自己 专属 的 包 管 理 器 : npm (node package manager). 

前 面 说 过 在 Mac OS 下 Nodejjs 的 安装 包 已 经 包含 npm, 实际 上 在 其 他 平台 上 或 者 直接 
通过 源码 方式 在 安装 Node 时 都 会 自动 安装 npm， 在 shell 下 运行 npm: 


$ npm -v 
el 


要 安装 一 个 包 非 常 简单 ， 调 用 npm install 命令 即 可 : 

$ npm install jquery 

正常 情况 下 ， 该 命令 会 将 可 以 运行 在 node 下 的 jquery 包 会 被 安装 在 当前 目录 的 
node modules 目录 里 ， 这 样 你 就 可 以 直接 在 项 目 中 使 用 了 : 

var $ = require('jquery') 

有 的 项 目 是 基于 Node 编写 的 命令 行 工具 ， 需 要 安装 到 计算 机 的 全 局 环境 ， 使 用 npm 
安装 时 需要 加 上 -g (global) 参数: 

$ npm install grunt-cli -g 

有 安装 ， 自 然 也 有 更 新 和 删除 : 


$ npm uninstall jquery 
$ npm update grunt-cli -g 


你 的 项 目 或 者 包 绝 大 部 分 情况 都 位 于 一 个 独立 的 目录 下 ， 你 可 以 为 包 创建 一 个 
package.json 文件 用 于 描述 这 个 包 的 名 字 、 版 本 和 依赖 等 信息 : 


{ 
"name": "test-app", // 你 的 包 或 应 用 名 字 
"yorsront 70.0.15, // 版 本 
"description": "just a test app", // 描 述 语句 
"dependencies": { // 依 赖 的 包 极其 版 本 


bli he Wh on pa i We 
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"underscore": "latest" 
}, 
"engines": { 
"node": ">=0.10.0" 
} 
H 


有 了 这 个 文件 后 ， 你 可 以 不 用 再 一 个 一 个 包 进 行 安装 ， 可 以 简单 地 运行 npm install 
命令 : 
$ npm install 


underscore81.5.2 node modules/underscore 
jquery@1.8.3 node modules/jquery 


HAR, update 命令 也 可 以 批量 更 新 所 有 指定 的 包 。 

package.json 包含 非常 多 的 配置 项 以 配合 npm 进行 使 用 ， 比 如 dependencies 指定 本 包 
所 依赖 的 包 ，devDependencies 指定 在 开发 时 用 到 的 包 (通常 是 一 些 工 具 )， 另 外 所 有 包 的 
版 本 号 遵循 Semantic Versioning 标准 (http://semver.org/)， 用 三 个 以 点 分 割 的 数字 表示 : E 
版 本 号 (major)、 次 版 本 号 (minor) 和 补丁 (patch)。 你 可 以 通过 npm help json 命令 来 查 
看 package.json 的 所 有 可 配置 项 。 

npm MEERE, npm 提供 了 搜索 功能 ， 可 以 让 你 迅速 定位 一 个 包 : 


$ npm search jquery 


Node.js 社区 非常 活跃 ， 时 至 今日 在 npm 源 (https://npmjs.org) 上 面 登记 注册 的 包 已 经 
多 达 47000 个 ， 这 个 数字 已 经 超过 了 诞生 10 多 年 的 Python 社区 ， 而 且 还 在 不 断 增加 中 。 


17.45 ”事件 驱动 和 异步 I/O 


这 一 小 节 要 讲解 的 内 容 是 Node.js 大 受 欢 迎 的 真正 原因 一 一 高 性 能 。 

JavaScript 本 身 是 一 门 单线 程 的 语言 , 任何 同步 操作 都 会 导致 整个 进程 都 被 挂 起 , 因此 
大 部 分 JavaScript 的 API 都 是 设计 为 基于 事件 的 形式 ， 比 如 在 浏览 器 中 的 DOM 事件 等 。 
由 于 是 事件 驱动 的 语言 , 通常 又 和 异步 操作 脱 不 了 干系 , 例如 Ajax 请 求 就 是 典型 的 异步 网 
络 VO 操作 。Nodejs 在 实现 时 也 继承 了 这 一 特性 ， 几 乎 所 有 的 Node.js 内 置 API 都 以 异步 
操作 配合 事件 提供 ， 例 如 操作 文件 : 

fs.readFile('/etc/passwd', function (err, data) { 

if (err) throw err; 

console.log (data); 

K T 

readFile 方法 调用 后 会 立即 返回 并 执行 接 下 来 的 代码 ， 整 个 线程 不 会 被 阻塞 ， 当 后 面 
的 代码 执行 完毕 时 ， 线 程 并 不 会 退出 ， 因 为 我 们 在 调用 读 文 件 方法 时 传 入 了 一 个 匿名 回调 
函数 , Node 会 在 文件 读 取 完 毕 或 读 取出 错时 调用 该 函数 , 这 和 常见 的 后 端 语言 读 写 文件 的 
模型 〈 如 Python) 很 不 一 样 ，Python 通常 是 同步 读 写 的 : 

# 所 有 代码 都 按照 书写 的 顺序 执行 

file = open('/etc/passwd') 
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trý: 
all text = file.read() 
finaly: 
file.close() 
这 样 的 执行 模型 使 得 Nodejs 非常 适合 处 理 网 络 请 求 一 一 因为 网 络 请 求 通常 是 短 时 间 
大 量 的 ， 如 果 使 用 传统 同步 模型 来 处 理 请 求 代码 中 涉及 到 的 IO 部 分 ， 当 IO 操作 阻塞 了 进 
程 ， 那 么 程序 将 无 法 接受 后 续 的 请 求 。 为 解决 这 一 问题 ， 传 统 后 端 语言 程序 在 处 理 高 并 发 
请 求 时 通常 会 选择 开 多 个 进程 或 者 线程 ， 新 的 线程 可 以 处 理 新 的 请 求 ， 但 这 样 做 开销 非常 
的 大 ， 总 体 性 能 也 不 好 。 
除了 异步 VO 外 ，V8 引擎 也 是 Nodejs 流行 的 重要 助力 。 过 去 JavaScript 一 直 被 诉 病 
执行 性 能 差 直到 Chrome V8 引擎 的 横 空 出 世 。V8 引擎 将 JavaScript 的 执行 性 能 进行 了 
数量 级 的 提升 ， 总 体 情况 超过 了 Python 和 Ruby 等 动态 语言 ， 甚 至 在 一 些 极端 情况 下 可 以 
与 C 语言 等 编译 型 语言 媲美 。 


17.1.6 ”前 端 工程 师 需 要 了 解 Node.js 的 什么 


前 面 几 小 节 内 容 我 们 晴 贤 点 水 般 地 介绍 了 Nodejs 的 几 个 核心 特性 ， 如 果 身 为 一 个 前 
端 工程 师 ， 你 没 理由 不 去 学 习 Node.js。 

一 方面 ，Node.js 作为 一 个 JavaScript 运行 环境 ， 让 一 大 波 想 兼 做 或 转 做 后 端的 前 端 工 
程 师 免 去 了 学 习 新 语言 的 苦恼 。 

另 一 方面 ， 前 端 技术 在 大 学 或 者 培训 机 构 都 极 少 被 讲授 ， 绝 大 多 数 前 端 工程 师 都 是 野 
生 程序 员 , 很 多 程序 员 并 没有 太 多 计算 机 科学 相关 的 知识 ，Node.js 让 你 有 机 会 接触 到 驱动 
网 站 或 应 用 背后 的 原理 : 文件、 网 络 、 协 议 、 数 据 库 和 操作 系统 …… 

Node.js 所 涉及 的 知识 非常 多 ， 那 么 对 于 专职 前 端的 你 ， 我 想 可 能 最 需要 是 这 些 知识 。 

O 利用 http 模块 构建 完整 的 web server: 在 学 习 http 模块 的 过 程 中 ,你 会 更 加 深刻 地 

理解 HTTP 协议 和 Node.js 的 工作 原理 ， 这 些 知 识 对 前 端 开发 也 有 很 大 帮助 。 

O Buffer: 计算 机 由 1 和 0 所 驱动 ， 学 习 Buffer 对 象 基本 就 是 重新 认识 比特 、 字 节 和 

编码 这 些 概念 的 过 程 ， 编 写 浏览 器 端的 JavaScript 时 通常 与 这 些 概念 都 沾 不 着 边 ， 
但 是 服务 器 编程 时 刻 都 与 它们 打交道 。 


17.2 工具 链 


中 国有 名 古话 ， 工 欲 善 其 事 ， 必 先 利 其 器 。 工 程 师 亦 为 工 折 ， 在 善 其 事 的 漫漫 长 路 ， 
我 们 总 是 上 下 左右 而 求索 ， 永 远 都 不 曾 满足 。 前 端 开发 到 今天 ， 也 形成 了 完整 的 方法 论 和 
许多 工具 链 ， 如 果 你 依然 在 用 记事 本 进行 着 复制 和 粘贴 ， 那 我 只 能 说 : 精神 可 嘉 。 


17.2.1 CoffeeScript 


Tii JavaScript 的 人 都 知道 JavaScript 有 各 种 各 样 的 缺点 。 
口 相等 运算 符 一 和 一 =: 使 用 上 容易 引起 混乱 。 
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with 语句 : 同上 。 
口 BE 降低 性 能 和 引入 安全 问题 。 
口 全 局 变量 污染 。 
U ERER, JavaScript 语言 精粹 这 本 书 花 了 一 整 章 的 篇 幅 来 讲解 JavaScript 中 
那些 糟粕 的 部 分 , JavaScript 程序 员 在 编写 程序 时 需要 记 住 这 些 陷阱 , 这 无 疑 是 巨大 的 负担 。 
CoffeeScript (http://coffeescript.org/) 是 一 门 小 巧 的 语言 ， 它 最 终 编 译 日 标 是 JavaScript 
代码 。CoffeeScript 的 设计 目标 在 于 将 JavaScript 糟粕 的 部 分 隐藏 起 来 ， 把 JavaScript 的 精 
粹 部 分 以 更 简洁 的 方式 展现 出 来 ， 并 提供 了 大 量 的 语法 糖 。 
来 看 一 段 CoffeeScript 代码 : 


* 赋值 语句 ， 不 用 写 var 关键 字 ， 也 永远 不 会 暴露 在 全 局 环境 : 
number = 42 
opposite = true 


+E 后 置 条 件 语句 使 得 代码 更 易 读 : 
number = -42 if opposite 


+ urs (E) RAI: 


square = (x) -> x *x 
# 数组 : 
tiskt = 2 00374 Si 
# 对 象 : 
math = 


root:  Math.sqrt 
square: square 


cube: (x) ^ x * square x 
# 可 变 参数 : 
race = (winner, runners...) -> 


print winner, runners 


# "存在 "运算 符 : 


alert "I knew it!" if elvis? 


# 数组 推导 (Array comprehensions) : 
cubes = (math.cube num for num in list) 


上 面 的 代码 最 终 会 被 “翻译 ”为 原始 的 JavaScript 代码 : 


var cubes, list, math, num, number, opposite, race, square, 
. Slice = [].slice; 


number = 42; 

opposite - true; 

if (opposite) ( 
number = -42; 

} 

square = function(x) { 


return x * x; 


}; 
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list 


[1, 2, 3, 4, 5]; 


math = ( 
root: Math.sqrt, 
Square: square, 
cube: function(x) ( 
return x * square (x); 


race = function() { 

var runners, winner; 

winner 三 arguments [0]， runners Ed 2 <= 
. Slice.call(arguments, 1) : []; 

return print(winner, runners); 


Um 


if (typeof elvis !-- "undefined" && elvis ! null) 
alert("I knew it!"); 


) 


cubes = (function() ( 
var i, len, results; 
results = []; 


for (i=0, len = list.length; i < len; i++) 
num = list[ i]; 
results.push (math.cube (num) ) ; 
) 
return results; 


HIO 


再 比如 CoffeeScript 类 的 编写 方式 : 


class Animal 
constructor: (8name) -> 


move: (meters) -> 
alert name + " moved £$(meters)m." 


class Snake extends Animal 
move: -> 
alert "Slithering..." 
super 5 


class Horse extends Animal 
move: -> 
alert "Galloping..." 
super 45 


sam = new Snake "Sammy the Python" 
tom = new Horse "Tommy the Palomino" 


sam.move () 
tom.move () 


编译 成 JavaScript: 


var Animal, Horse, Snake, sam, tom, ref, refl, 
hasProp = [().hasOwnProperty, 


arguments.length  ? 


extends = function(child, parent) { for (var key in parent) 
( hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() 


i HE 
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{ this.constructor = child; }  ctor.prototype =  parent.prototype; 
child.prototype = new ctor(); child. super = parent.prototype; return 
人 
Animal = (function() ( 
function Animal(name) ( 
this.name = name; 


) 


Animal.prototype.move = function(meters) ( 
return alert(this.name + (" moved " + meters + "m.")); 


}; 
return Animal; 


HO: 


Snake = (function(_super) { 
. extends (Snake, super); 


function Snake() ( 


ref = Snake. super .constructor.apply(this, arguments); 
return ref; 


) 


Snake.prototype.move = function() { 
alert("Slithering..."); 
return Snake. super  .move.call(this, 5); 


im 
return Snake; 
)) (Animal); 


Horse = (function( super) ( 
. extends(Horse, super); 


function Horse() { 


 refl = Horse. super  .constructor.apply(this, arguments); 
return refi; 


} 


Horse.prototype.move = function() { 
alert("Galloping..."); 


return Horse. super  .move.call(this, 45); 
u 
return Horse; 
)) (Animal); 
sam = new Snake("Sammy the Python"); 
tom = new Horse("Tommy the Palomino"); 


sam.move(); 


tom.move(); 
CoffeeScript 从 本 质 上 来 讲 就 是 JavaScript， 其 语法 简单 易学 ， 基 本 上 两 个 小 时 就 可 以 
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EFF RE 
命令 行 版 本 的 CoffeeScript 可 以 通过 npm 直接 安装 : 


$ npm install coffee-script -g 


安装 好 后 可 以 使 用 coffee 进入 交互 式 shell 或 者 进行 编译 .coffee 文件 (.cs 已 经 被 C# 占 
了 去 ， 因 此 CoffeeScript 选择 了 .coffee 作为 默认 后 级 名 ) 等 工作 。 

例如 ， 将 /src 目录 下 的 .coffee 文件 一 对 一 地 编译 至 /lib 目录 : 

$ coffee --compile --output lib/ src/ 

在 控制 台 内 输出 编译 结果 : 

$ coffee -bpe "alert i for i in [0..10]" 

计算 机 领域 有 个 著名 的 论断 : 程序 员 每 天 编写 相同 行 数 的 代码 与 他 们 使 用 的 语言 无 
关 。 这 意味 着 , 使 用 CoffeeScript 的 程序 员 比 使 用 JavaScript 能 在 单位 时 间 内 有 更 高 的 产 出 。 
不 得 不 说 ，CoffeeScript 真是 JavaScript 程序 员 们 节省 生命 和 告别 加 班 的 必 备 良药 ， 就 像 它 
的 名 字 和 Logo， 留 着 更 多 的 时 间 去 喝 咖啡 吧 ， 如 图 17.1 所 示 。 


OD 


图 17.1 CoffeeScript Logo 


关于 CoffeeScript 的 具体 语法 和 命令 行 用 法 等 内 容 ， 大 家 可 以 去 官方 网 站 查阅 
Chttp://coffeescript.org )。 


17.2.2 CSS 预 处 理 器 (CSS preprocessor) 


CSS 本 质 上 是 给 设计 师 准 备 的 语言 ， 里 面 不 包含 变量 和 条 件 分 支 等 概念 ， 这 大 大 降低 
了 初学 者 学 习 这 门 语言 的 成 本 ， 但 与 此 同时 也 给 组 织 代码 带 来 了 很 大 的 困难 ， 要 改 一 种 颜 
色 或 者 一 类 组 件 的 留 白 都 会 产生 大 量 的 查找 替换 工作 , 而 且 随 着 CSS 代码 规模 的 扩大 显得 
更 加 严重 ，CSS 预 处 理 器 的 发 明 就 是 为 了 给 CSS 增添 一 些 动态 的 特性 。 

目前 流行 的 CSS 预 处 理 器 有 Sass (http://sass-lang.com/)、Less (http://lesscss.org/) 和 
stylus (http:/Wlearnboost.github.io/stylus/)， 前 面 提 到 的 Bootstrap 项 目 即 是 由 Less 构建 的 。 

预 处 理 器 的 基本 功能 大 同 小 异 ， 接 下 来 以 Sass 为 例 ， 看 看 CSS 预 处 理 器 究竟 有 何 
魔力 。 

变量 可 以 用 来 存储 颜色 值 和 字体 等 可 用 重用 的 内 容 ， 这 使 得 构建 皮肤 系统 非常 方便 : 


EE 
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Sfont-stack: Helvetica, sans-serif; 
$primary-color: £333; 


body ( 
font: 100% $font-stack; 
color: $primary-color; 


) 
变量 以 8 开头 ， 上 面 的 Sass 代码 最 终生 成 的 CSS 代码 如 下 : 


body ( 
font: 100$ Helvetica, sans-serif; 
color: £333; 

jj 


嵌 套 写法 可 以 避免 写 很 多 次 父 级 元 素 


nav ( 
ul ( 
margin: 0; 
padding: 0; 
list-style: none; 


) 
li ( display: inline-block; } 


a { 
display: block; 
padding: 6px 12px; 
text-decoration: none; 
) 
) 


最 终生 成 : 


nav ul { 
margin: 0; 
padding: 0; 
list-style: none; 


} 


nav li ( 
display: inline-block; 
) 


nav a ( 
display: block; 
padding: 6px 12px; 
text-decoration: none; 


) 

某 些 情况 下 写 CSS 会 非常 无 聊 一 一 尤其 是 在 写 某 些 CSS 3 属性 时 , 同一 个 属性 要 写 各 
种 浏览 器 的 前 绥 来 保持 良好 的 兼容 性 ， 混 合 (mixin) 让 你 可 以 创建 可 在 全 站 进行 
式 定义 ， 甚 至 你 还 可 以 传递 参数 进去 : 


Gmixin border-radius ($radius) ( 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
-ms-border-radius: $radius; 
-o-border-radius: $radius; 
border-radius: $radius; 
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类 似 的 还 有 @extend 操作 符 ， 可 以 将 一 段 css 扩展 到 其 他 声明 : 
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border-color: yellow; 


} 
另外 还 可 以 进行 计算 : 
.container { width: 100%; } 


article[role-"main"] ( 

float: left; 

width: 600px / 960px * 100%; 
i 


aside[role-"complimentary"] ( 
float: right; 
width: 300px / 960px * 100%; 


) 
最 终生 成 : 


.container { 
width: 100%; 
|; 


article[role="main"] { 
float: left; 
width: 62.5$; 

) 


aside[role-"complimentary"] ( 
float: right; 
width: 31.25$; 
) 
Sass 基于 Ruby 编写 ， 安 装 前 确保 你 有 Ruby 环境 ， 接 着 使 用 gem 进行 安装 (gem 是 
Ruby 世界 的 npm): 


$ gem install sass 


接着 用 sass 命令 可 以 对 .scss 文件 (Sass 的 后 级 名 ) 进行 编译 : 


$ sass style.scss 


更 多 关于 Sass 的 内 容 大 家 可 以 查阅 其 官方 网 站 (http://sass-lang.com)。 
17.2.3 Grunt 


随 着 当今 Web 应 用 的 代码 规模 日 渐 扩 大 ， 以 前 靠 粘贴 jQuery 代码 片段 过 活 的 日 子 已 
经 一 去 不 复 返 了 ， 在 构建 Web 应 用 方面 我 们 要 考虑 的 问题 越 来 越 多 : 
编译 CoffeeScript 或 者 Sass 代码 ; 
P dint) JavaScript 或 者 CSS 代码 ; 
压缩 JavaScript 和 CSS 代码 ; 
预 编译 HTML 模板 ; 
打包 目标 文件 ; 
管理 目标 文件 版 本 ; 
运行 单元 测试 。 


DOCODCDOCODOCUDO 
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类 似 这 些 工 作 繁 琐 而 又 必 不 可 少 ，Grunt 便 是 为 解决 这 类 构建 问题 而 诞生 的 。 

Grunt 是 一 个 基于 任务 的 JavaScript 项 目 命令 行 构建 工具 ， 或 者 说 ， 是 一 个 JavaScript 
的 任务 运行 器 (The JavaScript Task Runner)， 它 能 使 你 的 构建 任务 自动 化 。 

使 用 Grunt 需要 先 安装 它 的 命令 行 工 具 〔 同 样 基 于 Node.js): 

$ npm install grunt-cli -g 

grunt-cli 会 将 grunt 命令 安装 在 你 的 系统 路 径 下 , 但 要 注意 的 是 这 并 不 会 安装 Grunt task 
runner, grunt-cli 的 主要 作用 是 运行 Gruntfile 所 在 目录 下 安装 的 Grunt 一 一 这 样 你 可 以 在 不 
同 的 项 目 中 使 用 不 同 版 本 的 Grunt。 

最 简单 的 命令 就 是 直接 运行 grunt: 

$ grunt 

此 时 grunt-cli 会 首先 寻找 当前 目录 下 是 否 安装 了 grunt 本 身 ， 如 果 安 装 了 ， 那 么 会 读 
取 当 前 目录 下 的 Gruntfilejs 文件 ， 这 个 文件 包含 了 你 的 项 目下 所 有 的 配置 ， 然 后 运行 默认 
的 任务 。 

搭建 一 个 基于 Grunt 构建 的 项 目的 过 程 必须 包含 两 个 文件 ,package.json 和 Gruntfile.js。 
package.json 我 们 之 前 讲 过 是 用 来 描述 当前 项 目 以 及 其 依赖 的 Cnpm) 包 ， 你 应 该 在 
package.json 里 面 列 出 grunt 本 身 以 及 你 所 用 到 的 grunt 的 插件 (所 有 grunt 支持 的 任务 都 以 
插件 形式 开发 )。Gruntfile.jjs 文件 〈 如 果 使 用 CoffeeScript 则 使 用 Gruntfile.coffee) 用 于 配 
置 任务 和 加 载 插件 。 

基于 grunt 的 项 目的 packagejson 一 般 是 这 样 的 : 

{ 


"name": "my-project-name", 
"version": "0.1.0", 
"devDependencies": ( 
Mgruntds Mug 
"grunt-contrib-jshint": "-0.6.3", 
"grunt-contrib-nodeunit": "-0.2.0", 
"grunt-contrib-uglify": "-0.2.2" 
} 
j; 
grunt 是 task runner，grunt- 开 头 的 包 是 grunt 插件 的 约定 命名 格式 ，grunt-contrib- 开 头 
大 多 是 grunt 官方 团队 自己 开发 的 插件 。 
Gruntfile 通常 和 package.json 位 于 同一 目录 (如 项 目的 根 目 录 )， 一 般 包含 这 样 儿 个 
部 分 : 
O 一 个 包 里 函数 (wrapper) ; 
口 项 目 和 任务 配置 ; 
O 加 载 grunt 插件 和 任务 ; 
口 自 定义 任务 。 
下 面 是 一 个 典型 的 Gruntfile: 


module.exports = function (grunt) { 


// 项 目 配置 
grunt -initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
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uglify: ( 
options: { 
banner: '/*! <%= pkg.name $5 <%= grunt.template.today ("yyyy-mm-dd") 
$» */An' 
b, 
build: { 


src: 'src/«$- pkg.name %>.js', 
dest: 'build/«$- pkg.name %>.min.js' 
) 
} 
E 


//W grunt-contrib-uglify 插件 ， 该 插件 提供 uglify 任务 
grunt.loadNpmTasks ('grunt-contrib-uglify'); 


// 注 册 一 个 默认 任务 ， 这 个 任务 的 内 容 是 允许 uglify 任务 
grunt.registerTask('default', ['uglify']); 


n 
3E ER ICEC SIC Ae UV. Node.js 模块 的 写法 ，grunt 会 在 运行 时 自动 加 载 该 模块 ， 你 的 
所 有 grunt 相关 代码 都 应 该 写 到 包 庄 函数 里 面 : 


module.exports = function(grunt) ( 


// 模 块 自动 调用 并 传 入 grunt 对 象 


à 


grunt.initConfig 方法 用 于 传 入 配置 对 象 ， 配 置 对 象 大 多 数 情况 提供 给 grunt 任务 使 用 ， 
在 上 面 的 例子 中 ，grunt.file.readJSON('package.json') 导 入 了 package.json 的 内 容 ， 并 在 配置 
项 中 命名 为 pkg， 这 样 我 们 在 后 面 的 配置 中 可 以 直接 使 用 该 配置 。<% %> 模 板 字符 串 可 以 
引用 任何 配置 项 ， 你 可 以 通过 这 种 方法 来 动态 配置 任务 所 需要 用 到 的 文件 路 径 或 者 文件 列 
表 之 类 的 内 容 。 

配置 对 象 一 方面 给 任务 提供 配置 ， 另 一 方面 你 可 以 存储 任何 有 用 的 数据 在 里 面 。 要 注 
意 的 是 ， 配 置 对 象 并 不 是 JSON 对 象 ， 因 此 不 必 拘 泥 于 JSON 格式 ， 你 可 以 在 配置 对 象 中 
写 任何 合法 的 JavaScript 代码 。 

和 大 多 插件 类 似 ，grunt-contrib-uglify 插件 的 uglify 任务 接收 配置 对 象 中 属性 名 和 任务 
名 一 样 的 那个 值 作为 配置 参数 ， 在 上 例 中 banner 选项 指定 压缩 后 输出 的 首 行 代码 ，build 
选项 是 一 个 压缩 目标 ， 其 指定 了 一 个 源 文件 地 址 和 一 个 目标 文件 地 址 。 

npm 安装 的 grunt 插件 在 Gruntfile 中 通过 grunt.loadNpmTasks 进行 加 载 ， 其 内 部 会 调 
用 Node.js 的 require() 方 法 : 

grunt.loadNpmTasks ('grunt-contrib-uglify'); 

你 可 以 用 grunt.registerTask 方法 注册 你 自 定义 的 任务 。 比 如 前 面 的 例子 ， 名 为 default 
的 任务 可 以 在 不 传递 任何 参数 的 情况 下 就 执行 uglify 任务 ， 以 下 三 个 命令 在 上 面 例子 是 等 
价 的 : 


$ grunt 
$ grunt uglify 
$ grunt default 


自 定义 任务 还 可 以 是 一 段 代码 : 


module.exports = function(grunt) { 
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// 这 个 default 任务 只 是 单纯 地 答应 了 一 行 正 确信 息 


grunt.registerTask('logit', "Log some stuff.', function() ( 


//grunt.log 提供 了 一 系列 用 于 在 控制 台 输出 信息 的 API 
grunt.log.write('Logging some stuff...').ok(); 
H: 
}; 
效果 如 图 17.2 所 示 。 
grunt logit 
Running "logit" task 


Logging some stuff... 


图 17.2 ”执行 自 定义 任务 和 插件 提供 任务 是 类 似 的 


ig 社区 包含 大 量 插件 ， 几 乎 一 切 能 自动 化 的 工作 都 有 人 在 grunt 的 帮助 下 将 它们 自 
动 化 了 ， 目 前 被 社区 索引 的 插件 已 多 达 1600 个 ， 你 可 以 在 这 里 (http://gruntjs.com/plugins) 
寻找 你 想 要 的 插件 。 


17.2.4 Bower 


包 管 理工 具 是 否 顺手 是 一 门 程序 语言 是 否 能 足够 流行 的 重要 决定 因素 之 一 。 一 句 话 来 
解释 ，npm 是 Node.js 的 包 管理 器 ， 而 bower 是 是 前 端的 包 管理 器 。 
bower 是 由 twitter 贡献 给 开源 社区 的 工具 ， 从 用 户 角 度 而 言 ，bower 几乎 就 是 一 个 下 
RT el 只 是 它 会 按照 正确 的 方式 去 下 载 你 需要 的 包 。 
装 bower 很 简单 : 


$ npm install -g bower 


由 于 bower 通过 git 来 管理 包 的 版 本 和 URL， 所 以 确保 你 的 机 器 也 安装 了 gito 
bower 的 用 法 和 npm 类 似 ， 也 同样 可 以 用 一 个 bowerjson 文件 描述 当前 项 目的 信息 和 
依赖 关系 : 
# 使 用 bower.json 中 定义 的 依赖 安装 包 
$ bower install 
安装 包 
bower install «package» 
安装 特定 版 本 的 包 
bower install «package»4«version» 
安装 
bower install <name>=<package>#<version> 
命令 中 提 到 的 <package> 可 以 是 下 面 几 种 类 型 的 值 : 
O 一 个 在 bower 官方 注册 了 的 名 称 ， 如 jQuery. 
O 远 端 git 地址， 如 git://github.com/someone/some-package.git。 
口 本 地 git 仓库 ， 如 ~/filod/some-package。 


4o dE Xp H a 


saa. 
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口 
口 


一 个 快捷 方式 ， 如 someone/some-package 〈 默 认 相 对 的 域 是 github) 。 
一 个 zip 或 tar 文件 的 URL，bower 会 自动 解压 。 


这 些 包 都 可 以 有 一 个 版 本 号 ， 这 个 版 本 号 同样 兼容 semver (http://semver.org/)。bower 


安装 的 包 会 下 载 到 当前 目录 的 bower components 目录 下 ， 如 果 你 要 使 用 包 中 文件 ， 可 以 自 


行 在 bower components 下 寻找 , 具体 使 用 方式 随 你 而 定 , 通常 是 在 script 标签 里 直接 引用 : 


«script src-"/bower components/jquery/index.js"»«/script» 


bower 也 可 以 搜索 包 : 


$ bower search angular 


bower.json 文件 和 package.json 的 用 法 非常 类 似 : 


t 


"name": "my-project", 
"version"; "1.0.0", 

"main": "path/to/main.css", 
"ignore": [ 


) 
fH 


ü 
ü 
ü 
ü 
ü 
口 
口 


如 


"jshintrc^, 
"ks Ext" 


F 
"dependencies": { 

"<name>": "<version>", 
"«name»": "«folder»?", 
"<name>": "«package»" 


r 
"devDependencies": { 
"<test-framework-name>": "<version>" 


司 时 bowerjson 也 简单 许多 ， 上 面 的 例子 已 经 是 bower 所 需 的 全 部 字段 类 型 。 
name: 你 的 包 的 名 字 。 

version: 包 的 版 本 。 

main: 包 的 入 口 (可 以 是 多 个 ) 。 

ignore: 不 需要 的 文件 ， 指 定 后 bower 会 在 安装 包 时 自动 忽略 。 
dependencies: 依赖 。 

devDependencies: 开发 时 依赖 。 

private: 如 果 设 置 为 tue， 则 不 会 Bower 官方 索引 。 

果 你 希望 自己 的 包 被 官方 索引 ， 可 以 使 用 下 面 这 个 命令 : 


bower register «my-package-name» <git-endpoint> 


被 
口 
口 
口 
口 


成 功 索 引 的 条 件 是 : 
bower.json 正确 无 误 。 
版 本 号 遵循 semver， 并 且 打 上 相应 的 git tag. 
必须 有 可 以 下 载 的 git 远 端 ( 比 如 github) 。 
包 名 没 和 已 有 包 名 冲突 。 


bower 甚至 有 自己 的 编程 API， 你 可 以 编写 基于 Node.js 的 脚本 来 执行 bower 命令 : 


va 
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r bower = require('bower'); 
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bower.commands 
-install(['jquery'], ( save: true ), ( /* custom config */ }) 
-on('end', function (installed) ( 

console.log(installed); 


p: 


bower.commands 

-search('jquery', (]) 

-on('end', function (results) ( 
console.log (results); 


p: 
17.2.5 Yeoman 


Yeoman 可 谓 神 器 也 。 

按照 Yeoman 的 说 法 ，Yeoman+Grunttbower 是 现代 化 webapp 开发 的 现代 化 工作 流 
(Modem workflows for modern WebApps )。 

Yeoman 所 倡导 的 工作 流 包含 三 个 工具 ， 用 于 提升 你 在 搭建 WebApps 时 的 工作 效率 和 
舒适 度 。 

口 Yo: 搭建 模板 项 目 ， 自 动 初始 化 可 能 用 到 Grunt 和 Bower 配 置 。 

口 Grunt: 构建 、 预 览 和 测试 你 的 应 用 ，Yeoman 团队 也 为 这 一 目标 贡献 了 许多 grunt 

插件 。 
口 Bower: 自动 化 管理 你 依赖 的 前 端 包 。 
图 17.3 展现 了 这 三 个 工具 使 用 的 顺序 。 


create a new webapp handle dependencies preview, test, build 
yo webapp bower search grunt server 
OR ou bower install grunt test 
Yo angular controller grunt 


图 173 Yeoman 工作 流 
Yo 是 Yeoman 团队 开发 的 主要 工具 , 用 于 生成 样板 项 目 一 一 具体 负责 生成 项 目的 程序 
ERNAS (generator), Yo 则 是 运行 生成 器 的 程序 。 
安装 yo 是 分 分 钟 的 事 : 


npm install -g yo 


AFE: npm 1.2 以 上 的 版 本 在 安装 yo 时 会 自动 帮 你 安装 bower 和 grunt. 


接着 , 你 需要 安装 具体 的 生成 器 ,Yeoman 团队 有 开发 一 个 基本 的 web application 样板 
生成 器 ， 叫 做 generator-webapp: 


npm install -g generator-webapp 


Yeoman 社区 有 许多 生成 器 , 比如 generator-angular, generator-mobile 和 generator-ember 


EIE 
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等 。generator-webapp 生成 器 包含 了 HTML 5 Biolerplate, jQuery. Modernizr 和 Bootstrap, 
在 调用 生成 器 的 时 候 ，Yo 会 以 交互 式 的 方式 问 你 选择 何 种 技术 。 

生成 只 需 一 步 : 

yo webapp 

效果 如 图 17.4 所 示 。 


eoo 1. yc 
yo webapp 


Out of the box I include HTMLS Boilerplate and jQuery. 
[?] What more would you like? 

Bootstrap for Sass 
O RequireJS 

Modernizr 


图 17.4 交互 式 的 样板 生成 


选择 好 后 ， 程 序 会 自动 生成 目录 结构 、 模 板 代 码 、Gruntfile 和 Bowerjson 等 文件 ， 并 
且 自 动 执行 npm install 和 bower install， 当 一 切 就 绪 后 ， 我 们 看 看 生成 器 生成 的 目录 结构 : 


Gruntfile.js 
app 
404.html 
bower components 
jquery 
modernizr 
sass-bootstrap 
favicon.ico 
images 
index.html 
robots.txt 
Scripts 
L— main.js 
styles 
L— main.scss 


| 

| 

| 
bower.json 
node modules 
posed 
package.json 


test 
index.html 
lib 


chai.js 
expect.js 


. 420 . 
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E L— mocha 
spec 


GG test.js 


可 以 看 到 ， 甚 至 连 测试 框架 都 帮 我 们 搞定 了 ， 紧 接着 我 们 执行 : 
grunt server 


此 时 会 自动 打开 你 的 浏览 器 ， 你 的 开发 环境 都 就 绪 了 一 一 一 切 都 是 自动 的 ， 如 图 17.5 


所 示 。 
test | Home | About Contact 


"Allo, 'Allo! 


Always a pleasure scaffolding your apps. 


Splendid! 


HTMLS Boilerplate 


HTMLS Boilerplate is a professional front-end 
template for building fast, robust, and adaptable 
web apps or sites. 


Bootstrap 


Sleek, intuitive, and powerful mobile first front-end 
framework for faster and easier web 
development. 


Modemizr 
Modernizr is an open-source JavaScript library 


that helps you build the next generation of HTMLS 
and CSS3-powered websites. 


* from the Yeoman team 


图 17.5 样板 页 面 


此 时 如 果 你 修改 代码 并 保存 ， 页 面 会 自动 刷新 一 嗯 ， 可 以 告别 你 的 F5 了 。 
那么 Yeoman 是 如 何 做 到 的 呢 ? 


e421: 
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先 来 看 看 生成 的 package.json: 


name": "test", 


"versron"-: "070-0*- 
"dependencies": (], 
"devDependencies": ( 


) 


"qrunt"- Sap asir 
"grunt-contrib-copy": "~0.4.1", 
"grunt-contrib-concat 
"grunt-contrib-uglify": 
"grunt-contrib-compass" x07520"7 
"grunt-contrib-jshint": 
"grunt-contrib-cssmin 
"grunt-contrib-connect" 
"grunt-contrib-clean" 
"grunt-contrib-htmlmin" 
"grunt-bower-install": "-0.5.0", 
"grunt-contrib-imagemin": "-0.2.0", 
"grunt-contrib-watch": "-0.5.2", 
"grunt-rev": "-0.T.0"; 
"grunt-autoprefixer": "-0.2.0", 
"grunt-usemin": "-0.1.10", 
"grunt-mocha": 7-0:4:0*7 
"grunt-modernizr": "-0.3.0", 
"grunt-svgmin": "~0.2.0", 
"grunt-concurrent": "-«0.3.0", 
"load-grunt-tasks": "-0.1.0", 
"time-grunt": "-0.1.1" 


, 


"engines": { 


"node": ">=0.8.0" 


} 
j 
可 以 看 到 ，generator-webapp 包含 了 非常 多 的 grunt 的 插件 ， 下 面 对 其 中 比较 重要 的 插 
件 进 行 说 明 。 

口 grunt-contrib-copy: 用 于 复制 文件 ， 比 如 从 源码 目录 复制 到 临时 目录 。 

O grunt-contrib-concat: 连接 文件 ， 大 部 分 时 候 我 们 需要 将 分 散 的 JavaScript 代码 连 
接 成 一 个 文件 以 减少 浏览 器 端的 HTTP 请 求 数量 。 

C) grunt-contrib-uglify: 压缩 JavaScript 代码 。 

口 grunt-contrib-compass: 编译 基于 compass 的 Sass 样式 代码 。 

口 grunt-contrib-jshint: 用 于 校 验 JavaScript 代码 。 

口 grunt-contrib-cssmin: 压缩 CSS 代码 。 

O grunt-contrib-connect: 使 用 connect 建立 开发 测试 用 的 Web 服务 器 。 

O grunt-contrib-clean: 清理 某 些 目录 ， 很 实用 。 

O grunt-contrib-htmlmin: 压缩 HTML 代码 (比如 不 必要 的 空格 )。 

O grunt-contrib-watch: 这 个 是 最 有 用 的 插件 了 ， 它 可 以 检测 你 源 代码 的 改变 ， 并 作 
出 反应 。 比 如 在 JavaScript 发 生变 化 时 利用 其 内 包含 的 LiveReload 功能 刷新 浏览 器 ， 
或 者 在 Sass 代码 变化 时 自动 编译 成 CSS。 

O gruntrev: 为 目标 文件 加 上 基于 MDS 等 Hash 算法 的 版 本 号 。 

O grunt-concurrent: 并 行 执行 多 个 Grunt 任务 。 
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在 包含 这 些 插 件 的 同时 ，Yeoman 也 配置 好 了 Gruntfile (截取 部 分 展示 ): 
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当 我 们 执行 grunt server 时 , 会 依次 执行 清理 目录 (clean:server)、 编译 JavaScript. CSS 
代码 〈concurrent:server)、 自 动 为 CSS 代码 加 前 缀 〈autoprefixer)、 开 启 Web 服务 器 
Cconnectlivereload) 和 监控 源 文件 变化 Cwatch) 这 一 系列 的 任务 。 

其 他 Yeoman Generator 也 完成 类 似 的 功能 ， 只 不 过 包含 的 插件 和 包 类 型 各 有 不 同 。 有 


pA 
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的 生成 器 还 包含 子 生 成 器 , 可 以 在 你 生成 项 目 之 后 继续 生成 代码 ,譬如 angular 生成 器 在 生 
成 项 目 后， 还 可 以 继续 生成 view 和 controller 等 代码 片段 。 


17.3 关于 调试 的 那些 事 儿 


调试 可 是 有 大 学 问 。 在 遥远 的 过 去 调试 Web 是 非常 困难 的 ， 一 方面 JavaScript 语言 
身 的 缺陷 很 容易 导致 奇怪 的 bug， 另 一 方面 调试 工具 的 缺失 使 得 很 多 人 都 使 用 alert 的 方式 
来 调试 程序 。 后 来 出 现 了 Firebug 这 样 的 浏览 器 插件 来 辅助 调试 ， 前 端 程序 员 也 获得 了 和 
Java、C# 程 序 员 类 似 的 调试 环境 ， 生 活 瞬 间 好 过 了 不 少 。 

可 在 移动 时 代 ， 多 浏览 器 调试 再 次 成 为 前 端 程序 员 的 心头 大 患 ， 本 节 将 讲解 一 些 调试 
方面 的 心得 体会 。 


17.3.1 Chrome 开发 者 工具 


Chrome 的 传奇 不 用 我 再 鳌 述 ，2008 年 Chrome 诞生 ， 短 短 四 年 后 Chrome 便 登 上 市 场 
占有 率 冠 军 宝 座 。 随 着 Chrome 一 起 释 出 的 开发 者 工具 也 是 极 快 的 速度 蛋 食 了 Firebug 的 
天 地 。 

Chrome 开发 者 工具 最 突出 的 特点 是 好 用 。 

常规 的 审查 元 素 、 网 络 请 求 、 脚 本 调试 和 控制 台 等 功能 想必 大 家 已 经 了 如 指 掌 ， 本 书 
不 再 袭 述 , 前 面 的 章节 中 也 或 多 或 少 介绍 了 一 些 Chrome 开发 者 工具 在 移动 开发 中 的 应 用 ， 
接 下 来 着 重 介绍 一 下 很 少 触 碰 到 的 方法 。 


1. 格式 化 代码 


很 多 时 候 你 看 到 的 代码 都 是 经 过 压缩 后 只 有 一 行 的 代码 ， 通 过 格式 化 代码 功能 可 以 让 
代码 变 得 好 看 一 点 点 ， 如 图 17.6 所 示 。 


240 if (b && 0 == c & 0 = d) 

241 return "PTOS"; 

242 d= []; 

243 9 > c & d.push("-"); 

244 d.push("P"); 

245 (this.se || b) && d.push(Math.abs(this.se) + "Y"); 
246 (this.ke || b) && d.push(Math.abs(this.ke)  "M"); 
247 (this.Rd || b) && d.push(Math.abs(this.Rd) + "D"); 
248 if (this.Fd || this.Kd || this.Md || b) 

249 d.push("T"), (this.Fd || b) && d.push(Math.abs(thi 
250 (this.Md || b) && d.push(Math.abs(this.Md) + "S"); 
251 „return d. join("" 

252 

253 ns.p otype.eg = function(b) { 

254 , retu b.se == this.se && b.ke == this.ke && b.Rd == 


= Q (Q {í} Lie1,Column1 


图 17.6 格式 化 代码 


2. 实时 代码 编辑 
Source 面板 下 的 代码 是 可 以 直接 编辑 的 ，Ctrl+S (或 者 Cmd+S) 保存 后 便 立 即 生效 ， 


ss 
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不 用 刷新 页 面 ， 而 且 配 合 映射 到 本 地 磁盘 代码 的 功能 可 以 实现 一 边 修改 一 边 保存 到 本 地 源 


文件 (右键 单 击 任意 源 文件 )。 


先 打开 Sources 面板 的 侧 栏 ， 右键 单 击 “Add Folder to Workspace", 将 本 地 磁盘 上 的 文 
件 添加 至 Chrome 的 工作 空间 中 ， 如 图 17.7 所 示 。 

接着 将 你 想 要 映射 的 文件 (js 和 .css 文件 都 适用 ) 打开 , 右键 选择 “Map to File System 
Resource...", Chrome 会 自动 在 工作 空间 寻找 同名 文件 进行 映射 ， 如 图 17.8 所 示 。 


Sources Conte... Snipp... [|l iry.mobile.js 
» © (no domain) 2 | Git HE 
> © cpngackimfmofbokmjmljamgefine && 
* © localhost:8000 — wm 
»Cisrc lionta, b, 
Add Folder to Workspace 
(a.mobile, 
type(c) && 


图 17.7 添加 目录 到 工作 空间 


X Elements Resources Network | Sources! Timeline Pr 


B | Jquery.mobile.js. x| 


3 fc Local Modifications... | 7” 
EISA Map to File System Resource. d? 
4 ri 
= A Open Link in New Tab 
7 ii Copy Link Address 
8 a; 
9 Ma, Save 
1e vi Save As... 
aa 


11 —————— MX 
12 "number" !— a.type(c) && (c = a.mobi 
13 b.scrollTo(0, c), a.mobile.document 
m X aV -erTimanoiy 人 foonrrinnly 了 


图 17.8 ”映射 到 本 地 目录 


Ctrl+O COmd*O) 可 以 打开 快速 搜寻 文件 的 对 话 框 (模糊 匹配 )， 如 图 17.9 所 示 。 


3. source map 


对 于 CoffeeScript 和 Sass 等 预 编 译 语言 ， 可 以 使 用 source map 技术 将 编译 后 代码 映射 
到 编译 前 的 代码 进行 调试 ， 如 图 17.10 所 示 。 


[oonincs| 

bootstrap.min.css 

localhost :8000/ch5/assets/bootstra 
shortcut.min.js 
pliopboejkkmebobeabhdpmpngigicig/s 
functions.js 
gighmmpiobklfepjocnamgkkbiglidom/f 


handler stack.js 
dbepggeogbaibhgnhhndojpepiihcmeb/l 


rightclick hook. js 
gighmmpiobklfepjocnamgkkbiglidom/. 


图 17.9 快速 搜寻 文件 


Sources 


加 Search in content scripts 


(Mf Enable JS source maps 
(M Enable CSS source maps 


(M Auto-reload generated CSS 


图 17.10 source map 


需要 调试 的 js 文件 需要 在 结尾 用 注释 指定 对 应 的 .map 文件 (可 用 工具 生成 ), 如 图 17.11 


所 示 。 


(function() { 


'use strict' 


angular.module( 'webappApp').controlu 


1 
2 
3 
4 
5| )).cali(this); 
6 
7 
B 
9 


/* 
//@ sourceMappingURL-ma: .map 
BE 


图 17.34. 带 有 source map 的 js 文件 
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map 文件 的 内 容 类 似 这 样 : 
t 


"version": 3, 
-file MERAB Jay 
"sourceRoot": "", 
"sources": [ 
"main.coffee" 
l, 
"names": [], 
"mappings": 
"AAAA; CAAA, CAAA, UAAA; CAAA, CAEA, CACOB, EAAA, CAD1B, CAAO, EACoB, CAD3B, CAAA; CAFA" 


} 
接着 就 可 以 直接 调试 coffee 文件 了 ， 如 图 17.12 所 示 。 
4. 条 件 断 点 


在 代码 行 数 右键 可 以 添加 条 件 断 点 ， 如 图 17.13 所 示 。 


topBanner: { - 


16 
37 if [*unenf SAFADT 一 "undafinad* 


Continue to Here 


16 if Sscope.type?.url 
17 $http.get(Sscope.type.url).su Add Breakpoint ; 
18 tpl = ..template(snippet) Add Conditional Breakpoint.. 

图 17.12 调试 coffee 文件 图 17.13 添加 条 件 断 点 


条 件 断 点 允许 你 输入 一 个 表达 式 ， 当 该 表达 式 在 此 处 计算 为 true 时 断 点 会 生效 ， 如 图 
17.14 所 示 。 


e 


le breakpoint on line 
a-il 


图 17.14 条 件 表达 式 


Timeline, Profile 和 Audits 面板 还 隐藏 着 大 量 关 于 优化 程序 性 能 的 好 用 工具 ， 更 多 
Chrome 开发 者 工具 的 神奇 之 处 大 家 可 以 自行 挖掘 。 


17.32 ”多 设备 调试 : Adobe Edge Inspect 


Adobe Edge ( http://html.adobe.com/edge/) 是 Adobe 公司 开发 的 一 整套 HTML 5 FRI 
包括 以 下 内 容 。 

Edge Animate: 动画 制作 器 。 

Edge Reflow: 可 视 化 的 响应 式 Web 设计 工具 。 

Edge Code: 代码 编辑 器 。 

EdgeInspect: 多 设备 调试 工具 。 

Edge Web Fonts: 一 套 免 费 Web 字体 。 

PhoneGap Build: 基于 Phonegap 的 一 套 云 编译 系统 。 


ES 


DODCDDOLDO 
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本 小 节 将 着 重 介 绍 Edge Inspect 工具 Chttp://html.adobe.com/edge/inspect/) . 

Edge Inspect 包含 三 个 部 分 ， 一 个 部 分 是 安装 在 电脑 上 的 软件 ， 一 个 部 分 是 Chrome 浏 
览 器 上 的 插件 ， 还 有 一 部 分 是 安装 在 移动 设备 上 的 APP (目前 支持 Android, iOS 和 Kindle 
Fire)， 如 图 17.15 所 示 ，Edge Inspect 包含 这 样 一 些 功能 
O 同步 浏览 刷新 : 当 你 的 移动 设备 和 电脑 处 于 同一 个 无 线 网 络 时 ，Edge Inspect 可 以 
对 他 们 进行 配对 ， 你 在 电脑 端 Chrome 里 面 浏览 页 面 时 ， 所 有 连接 了 的 设备 会 保持 
同步 你 在 Chrome 里 的 页 面 。 
口 远程 调试 : Edge Inspect 包含 了 一 个 从 webkit 剥离 的 开发 者 工具 (和 Chrome 开发 
者 工具 同宗 同 源 ) ， 可 以 直接 对 移动 设备 端的 页 面 进行 调试 。 
O 截屏 : 你 可 以 在 Chrome 里 对 所 有 连接 了 的 设备 进行 截屏 。 
O 支持 本 地 URL: 诸如 localhost 和 127.0.0.1。 


E E 


图 17.15 Edge Inspect 


安装 好 Edge Inspect 的 三 个 部 分 后 ， 其 使 用 也 非常 简单 ， 首 先 打开 电脑 上 的 Inspect, 
它 要 求 你 有 Adobe 的 账号 ， 不 过 单独 使 用 Edge Inspect 是 不 收费 的 ， 如 图 17.16 所 示 。 
接着 打开 Chrome 浏览 器 ， 以 及 Inspect 插件 ， 如 图 17.17 所 示 。 


Adobe Edge Tools 


Edge Inspect CC 


Sign In You areci 


Adobe ID (Email Address) 
filod33gmail.com 


Password 


Stay signed in Trouble signing in? 


图 17.16 ”电脑 端 Edge Inspect 图 17.17 Edge Inspect 插件 
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与 此 同时 打开 你 的 手机 Inspect app， 此 时 可 以 发 现 它 们 已 经 配对 了 并 打开 了 同样 的 页 
面 ， 如 图 17.18 所 示 。 


图 17.18 已 配对 状态 


此 时 你 可 以 在 Chrome 里 随意 切换 Tab 或 者 刷新 ， 你 的 手机 端 总 会 自动 同步 电脑 端的 
状态 ， 这 省 去 了 大 量 调试 真 机 的 时 间 。 
单 击 设备 旁边 的 “<> ”按钮 可 以 打开 远程 调试 器 ， 如 图 17.19 所 示 。 


@ 日 日 weinre: https:/ /www.google.com.hk/search?q -weinre&oq -weinre&ags- chrome..69/57j0l3j6... w 


Devices 


* filod's iPhone - https://www.google.com.hk/search? 


> here is remote debugger 


= Q C | Errors Wamings Logs 


图 17.19 基于 weinre 项 目的 远程 调试 器 


比较 遗憾 的 是 现在 这 个 远程 调试 器 还 不 支持 JavaScript 的 调试 。 
Edge Inspect 与 其 他 Edge 工具 有 着 良好 的 集成 ， 如 果 你 比较 有 钱 ， 可 以 考虑 使 用 整套 
Adobe 的 开发 者 工具 。 


17.4 从 职业 到 专业 、 从 前 端 到 全 端 


17.4.1 Mac 与 Windows 


既然 标题 已 经 起 的 这 么 管 动 了 , 那么 就 再 管 动 一 点 让 结论 先行 : 对 前 端 开发 而 言 , Mac 
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下 的 总 体 开发 体验 优 于 Windows. 

笔者 曾经 使 用 Windows 工作 ， 于 近 两 年 转投 Mac。 相 比 于 Windows, Mac 有 这 样 一 些 
O Mac 优秀 的 工业 设计 本 身 就 甩 PC 好 几 条 大 街 , 这 点 对 于 所 有 用 户 而 言 都 是 毋庸 置 
疑 的 。 
O Mac OS 以 及 上 面 的 软件 总 体质 量 都 很 高 ， 在 视觉 设计 和 用 户 体验 上 尤 甚 。 前端 设 
计 讲 究 视觉 也 讲究 体验 ， 与 优秀 的 软件 工作 有 助 于 创作 出 优秀 的 软件 。 
O 开发 工具 丰富 : Sublime, Aptana Studio, Textmate 和 WebStorm*…… 应 有 尽 有 ， 大 
部 分 都 是 免费 或 者 收费 低廉 的 。 
O Mac OS 本 身 是 类 Linux 系统 ， 与 Linux 是 录 亲 。 这 对 于 前 端 工程 师 接 触 服务 器 的 
世界 奠定 良好 的 基础 。 
口 开源 世界 的 新 鲜 玩意 儿 从 来 都 先 支 持 Linux 或 者 Mac (比如 Node.js)，, 等 Windows 

版 ? 黄花 菜 都 凉 了 。 


Mac 唯一 的 短 板 可 能 是 正 一 一 你 必须 使 用 虚拟 机 来 进行 IE 测试 。 不 过 ， 这 已 经 2014 
年 了 ， 你 竟然 还 需要 测试 正 ? 果断 抛弃 它 吧 ! 
当然 ， 优 秀 的 体验 通常 也 意味 着 高 昂 的 价格 ， 不 过 笔者 仍然 建议 有 条 件 的 大 家 入 手 


Mac 设备 ， 相 信和 在 使 用 过 后 你 一 定 不 会 后 悔 ! 
17.4.2 Sublime Text 


笔者 用 过 许多 编辑 器 ，Sublime Text 是 最 钟爱 的 一 个 一 一 就 像 它 的 宣传 语 : The text 
editor youll fall in love with (一 个 你 会 爱 上 的 编辑 器 )。Sublime Text 倍 受 欢迎 的 原因 有 这 
样 一 些 。 

1. 快速 抵达 任何 你 想 去 的 地 方 

使 用 CMD+P 快捷 键 可 以 打开 跳 转 面板 ， 面 板 中 可 以 进行 非常 模糊 的 搜索 ， 可 以 跳 转 
到 任意 文件 、 代 码 行 或 者 函数 符号 ， 如 图 17.20 所 示 。 


bok/c/jqm2 


forms2.html 
bcok/c^5 /jqm 


popup2.html 


图 17.20 Sublime 快速 跳 转 


2. 命令 面板 
其 他 编辑 器 在 调用 命令 时 通常 是 通过 菜单 选择 或 者 记忆 快捷 键 ，Sublime 提供 了 一 个 


- 430* 


第 17 章 “如 何 成 为 优秀 的 前 端 工程 师 


命令 面板 (cmd+shifttrp)， 所 有 命令 都 可 以 在 这 里 看 到 ， 而 且 依 然 可 以 使 用 强大 的 模糊 搜 
索 功能 来 快速 定位 命令 ， 如 图 17.21 所 示 。 


Demonstration 


e, subl 
h 


: Set Syntax: Python 
ERAT Set Syntax: Regular Expressions (Python) 
ual line mode: Motions are extended to BOL and EOL. 


E1721 命令 面板 


3. 多重 选择 


Sublime 的 多 重 标 选择 非常 好 用 ， 你 可 以 在 十 个 地 方 插入 十 个 光标 同时 更 改 内容 ， 这 
对 重 构 代码 来 讲 非常 方便 。 


4. 分 屏 编 辑 
将 一 个 或 者 多 个 文件 分 别 在 多 个 小 窗口 进行 编辑 。 
5. 插件 


Sublime 社区 里 的 插件 包罗 万 象 ， 而 针对 前 端 开发 的 插件 尤其 丰富 。 
更 多 Sublime 的 优秀 之 处 还 由 大 家 自己 探索 (http://www.sublimetext.com/ )。 


17.4.80 MV* 框架 


随 着 前 端 应 用 规模 的 不 断 扩 大 ， 过 去 高 度 依赖 DOM 操作 的 Web 应 用 开发 模式 暴露 出 
了 很 大 的 局 限 性 ， 传 统 MVC 软件 架构 模式 在 近 几 年 不 断 被 Web 开发 界 提起 ， 单 页 应 用 
(SPA, Single Page Application ) 成 为 当前 Web 应 用 的 热门 词汇 , 同时 也 涌现 了 一 大 批 MVC. 
MVVM 和 MV* 前 端 框架 ， 作 为 一 个 专业 的 前 端 工程 师 ， 有 必要 深入 学 习 它 们 的 思想 和 应 
用 ， 其 中 比较 热门 的 框架 有 下 面 几 种 。 
口 Backbonejs: 成 名 早 、 社 区 大 、 小 巧 和 功能 单一 。 
口 Knockoutjs: 双向 绑 定 和 MVVM 架构 。 
口 Emberjs: 模板 系统 强大 、 数 据 绑 定 和 社区 运作 良好 。 
口 Angularjs: Google 出 品 、 扩 展 HIML 和 理念 先进 。 
如 果 你 在 选择 MV* 框 架 的 时 候 感觉 到 吃力 ， 那 么 你 可 以 访问 TodoMVC 网 站 
Chttp:/todomvc.com/)。 这 个 网 站 将 一 个 简单 的 代办 列表 应 用 ， 利 用 几乎 所 有 流行 或 者 不 流 
行 的 框架 来 实现 ， 并 开放 了 源 代 码 ， 你 可 以 比较 不 同 框架 在 实现 这 个 应 用 时 各 自 有 哪些 优 
缺点 ， 从 而 选择 最 合适 自己 的 框架 ， 如 图 17.22 所 示 。 
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第 2 篇 HTML 5 移动 Web 开发 实战 


JavaScript Apps 
Backbone.js G Maria G soma.js DeftJS + ExtJS 
AngularJS Polymer DUEL Aria Templates [7 
Ember.js © cujoJS Kendo UI C Emo 
KnockoutJS [:: dermis |:: PureMVC © Backbone je 
Dojo © Montage Olives Pici Es 
YUI (3 Ext.js PlastronJS 0 React [7 
Agility.js |: Sammy;js © Dijon SAPU G 
Knockback.js |: Stapes ': rAppid.js © Exoskeleton [3 
CanJS G Epitome | Knockout + Lf 

ClassBinding © SL 
* O = App also demonstrates routing 
* Maroon - App requires further work to comply with the spec 
Compile To JavaScript 
Spine G GWT G BatmanJjs 已 TypeScript 

+ AngularJS © 

Dart G Closure 已 TypeScript 

+ Backbone.js Serenade.js 


图 17.22 TodoMVC 


值得 一 提 的 是 ，Angularjs (http:/www.angularjs.org/) 是 前 端 框架 的 一 个 巨大 革新 ， 它 
的 设计 思路 十 分 有 趣 、 社 区 发 展 也 很 健康 ， 现 在 已 经 超过 Emberjs 成 为 github 上 最 受 欢迎 
的 前 端 MV* 框 架 (总 排名 也 仅仅 次 于 jQuery)。 对 笔者 而 言 ，Angularjs 已 经 成 为 开发 前 端 
应 用 不 可 或 缺 的 工具 ， 由 于 篇 幅 无 法 在 本 书展 开讲 解 ， 强 烈 建议 大 家 深入 研究 Angularjs， 
相信 会 收获 不 小 。 


17.4.4 ”如 何 保持 你 的 知识 处 在 最 前 沿 


第 一 点 很 重要 的 是 英语 。 

我 承认 国人 是 有 很 多 牛人 在 前 端 能 创造 出 很 多 有 趣 有 用 的 东西 ， 但 必须 要 正视 的 是 ， 
我 们 国家 整个 IT 工业 都 落后 于 欧美 国家 一 大 截 ， 而 绝 大 部 分 优秀 的 新 的 技术 几乎 都 来 源 
于 欧美 国家 , 这 通常 也 意味 着 没有 中 文 资料 , 依赖 官方 或 非 官 方 的 汉化 总 是 要 等 很 长 时 间 ， 
等 中 文 资料 满 大 街 了 ， 同 时 可 能 也 表明 这 种 技术 已 经 过 时 了 。 因 此 ， 流 畅 阅读 英文 材料 几 
乎 已 成 为 一 个 优秀 程序 员 的 必 备 技能 ， 越 来 越 多 的 企业 也 将 这 一 点 作为 基本 的 招聘 要 求 
P dm 


y 


那么 很 多 人 可 能 会 问 ， 我 的 英文 不 好 词汇 量 小 读 不 懂 技 术 文章 怎么 办 ? 需要 背 单词 
吗 ? 如 何 学 好 英文 并 不 是 本 书 的 主旨 ， 就 笔者 的 经 验 ， 有 这 些 方法 可 以 迅速 提升 阅读 技术 
文章 的 能 力 : 
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第 17 章 “如 何 成 为 优秀 的 前 端 工程 师 


口 订阅 一 些 优秀 的 国外 技术 作者 或 机 构 的 Blog， 你 的 阅读 器 会 提醒 你 一 一 一 方面 练 
习 了 英语 ， 另 一 方面 还 学 习 了 技术 。 
口 使 用 框架 或 库 时 不 依赖 中 文 资料 ， 先 从 英文 文档 读 起 。 
口 在 搜索 时 主动 使 用 英文 版 的 Google， 一 方面 可 以 强迫 自己 用 英文 资料 解决 问题 ， 
另 一 方面 在 组 织 搜索 词 时 也 对 英文 写作 是 一 种 提升 。 
O 多 泡 优秀 的 技术 社区 : github, stackoverflow 以 及 具体 技术 的 邮件 列表 (通常 是 
Google Group) 。 
另 一 点 很 重要 的 就 是 修炼 内 功 。 
那么 对 于 前 端 开发 的 大 家 来 说 ， 什 么 是 修炼 内 功 呢 ? 
O 计算 机 基础 : 算法 、 操 作 系统 、 数 据 结构 、 网 络 和 编译 原理 …… 这 些 东西 对 于 搞 
计算 机 的 人 来 说 都 是 内 功 ， 前 端 也 不 例外 。 
O 浏览 器 工作 原理 。 前 端 工程 师 绝 大 多 数 时 间 都 在 与 浏览 器 打交道 ， 俗 话说 知 其 然 
也 要 知 其 所 以 然 ,了 解 浏览 器 的 工作 原理 能 让 你 对 现 有 知识 的 理解 上 升 一 个 台阶 ， 
你 也 更 好 地 处 理性 能 和 兼容 性 问题 。 
O 不 断 重 构 你 的 代码 也 是 提升 内 功 的 方式 。 在 重 构 代码 的 过 程 中 你 会 重新 思考 过 去 
的 设计 ， 思 考 有 助 于 认 清 问题 的 本 质 ， 并 提升 自己 的 编程 水 平 。 
最 后 一 点 我 想 应 该 是 学 习 力 和 学 习习 惯 。 任 何 真正 掌握 的 知识 都 不 是 教 来 的 ， 都 是 自 
己 学 来 的 ， 保 持 良好 的 学 习习 惯 非常 重要 。 


17.4.5 ”跳出 前 端 ， 更 大 的 世界 


前 端 工程 师 是 一 个 非常 有 价值 的 职业 。 无 论 是 对 产品 的 价值 ， 还 是 对 前 端 工程 师 自 己 
的 价值 。 

前 端 工程 师 开 发 直接 和 用 户 相关 的 软件 ， 能 精准 地 把 握 用 户 体 验 的 不 足 和 痛 点 ， 前 端 
还 直接 对 接 产品 端的 需求 ， 是 第 一 个 将 设想 和 草图 变 为 实 实 在 在 可 摸 到 的 东西 的 人 ， 与 此 
同时 ， 前 端 还 与 后 端 直接 合作 ， 处 理 后 端的 数据 该 如 何 展 示 、 协 助 后 端 解 决 问题 …… 总 之 ， 
前 端 工程 师 就 是 万 能 胶 ， 将 互联 网 产品 的 开发 所 有 环节 都 粘 了 起 来 ， 一 方面 对 前 端 工程 师 
本 身 的 素质 要 求 很 高 ， 除 了 懂 前 端 ， 后 端 、 产 品 、 视 觉 和 用 户 体验 都 要 懂 ， 而 且 还 得 有 较 
好 的 沟通 能 力 ， 另 一 方面 这 些 东西 对 前 端 工程 师 本 身 也 是 一 种 麻 硕 。 
虽然 前 端 工程 师 仅仅 是 一 个 职业 ， 但 只 有 跳出 单一 的 职业 才能 获得 更 多 的 成 长 ， 从 前 
端 到 “全 端 ” 还 有 很 长 的 路 要 走 ， 笔 者 与 大 家 共勉 ! 
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